【Canvas与图标】乡土风金属铝边立方红黄底黑字图像处理图标
【成图】
120*120图标：
大小图：
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>金属铝边立方红黄底黑字图像处理图标</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=512;
const HEIGHT=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas'); canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移// 准备stage=new Stage(); stage.init();// 开幕animate();
}// 播放动画
function animate(){ stage.update(); stage.paintBg(ctx);stage.paintFg(ctx); // 循环if(true){//sleep(100);window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){ }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 }// 画前景this.paintFg=function(ctx){// 底色ctx.save();ctx.fillStyle = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();const R=210;// 基准尺寸// 第1圈ctx.save(); ctx.shadowOffsetX=R/105; ctx.shadowOffsetY=R/105; ctx.shadowColor="lightgrey";ctx.shadowBlur=R/105*2;var r=R*1.00;ctx.fillStyle="grey";drawRhombusSqare(ctx,0,0,r,R/6);ctx.fill();ctx.restore(); // 第2圈ctx.save(); var r=R*0.99;var gnt2=ctx.createLinearGradient(0,-r,0,r);gnt2.addColorStop(0,"rgb(111,111,111)");gnt2.addColorStop(0.25,"rgb(251,251,251)");gnt2.addColorStop(0.5,"rgb(179,179,179)");gnt2.addColorStop(0.75,"rgb(251,251,251)");gnt2.addColorStop(1.0,"rgb(111,111,111)");ctx.fillStyle=gnt2;drawRhombusSqare(ctx,0,0,r,R/6-0.01*R);ctx.fill();ctx.restore();// 第3圈ctx.save(); var r=R*0.91;var gnt2=ctx.createLinearGradient(0,-r,0,r);gnt2.addColorStop(0,"rgb(107,107,107)");gnt2.addColorStop(0.25,"rgb(143,143,143)");gnt2.addColorStop(0.5,"rgb(95,95,95)");gnt2.addColorStop(0.75,"rgb(143,143,143)");gnt2.addColorStop(1.0,"rgb(107,107,107)");ctx.fillStyle=gnt2;drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.04*R);ctx.fill();ctx.restore();// 第4圈ctx.save(); var r=R*0.87;ctx.fillStyle="rgb(210,33,30)";drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);ctx.fill();ctx.restore();// 黄带ctx.save(); var r=R*0.87;drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);ctx.clip();ctx.fillStyle="rgb(247,187,15)";drawRect(ctx,0,0,2*r,r);ctx.fill();ctx.restore();// 白线ctx.save(); var r=R*0.87;drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);ctx.clip();ctx.lineWidth=R/105;ctx.strokeStyle="white";var N=12;var PART=r/N;for(var i=0;i<N+1;i++){ctx.beginPath();ctx.moveTo(-r,-r/2+i*PART);ctx.lineTo(+r,-r/2+i*PART);ctx.stroke();}ctx.restore();// 文字ctx.save(); var r=R*0.87;ctx.textBaseline="middle";ctx.textAlign="center";ctx.font = r*0.4+"px 方正宋刻本秀楷简体";ctx.fillStyle="black";ctx.fillText("图像处理",0,r*0);ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制旋转45°的正方形
ctx:绘图上下文
x:正方形中心横坐标
y:正方形中心纵坐标
radius:正方形中心到顶点的距离
roundRadius:圆角半径
----------------------------------------------------------*/
function drawRhombusSqare(ctx,x,y,radius,roundRadius){const r=radius;// 中心到顶点的距离const round=roundRadius;// 圆角半径var center=createPt(x,y);var a=createPt(center.x+r*Math.cos(Math.PI/2*0),center.y+r*Math.sin(Math.PI/2*0));var angle=Math.PI/4*5;var l=round;var a1=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));angle=Math.PI/4*3;l=round;var a2=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));angle=Math.PI;l=round*Math.sqrt(2);var a0=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));var b=createPt(center.x+r*Math.cos(Math.PI/2*1),center.y+r*Math.sin(Math.PI/2*1));angle=-Math.PI/4;l=round;var b1=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));angle=Math.PI/4*5;l=round;var b2=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));angle=-Math.PI/2;l=round*Math.sqrt(2);var b0=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));var c=createPt(center.x+r*Math.cos(Math.PI/2*2),center.y+r*Math.sin(Math.PI/2*2));angle=Math.PI/4*1;l=round;var c1=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));angle=-Math.PI/4*1;l=round;var c2=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));angle=0;l=round*Math.sqrt(2);var c0=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));var d=createPt(center.x+r*Math.cos(Math.PI/2*3),center.y+r*Math.sin(Math.PI/2*3));angle=Math.PI/4*3;l=round;var d1=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));angle=Math.PI/4*1;l=round;var d2=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));angle=Math.PI/2;l=round*Math.sqrt(2);var d0=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));ctx.beginPath();ctx.moveTo(a1.x,a1.y);ctx.arc(a0.x,a0.y,round,-Math.PI/4,Math.PI/4,false);ctx.lineTo(a2.x,a2.y);ctx.lineTo(b1.x,b1.y);ctx.arc(b0.x,b0.y,round,Math.PI/4,Math.PI/4*3,false);ctx.lineTo(b2.x,b2.y);ctx.lineTo(c1.x,c1.y);ctx.arc(c0.x,c0.y,round,Math.PI/4*3,Math.PI/4*5,false);ctx.lineTo(c2.x,c2.y);ctx.lineTo(d1.x,d1.y);ctx.arc(d0.x,d0.y,round,Math.PI/4*5,-Math.PI/4*1,false);ctx.lineTo(d2.x,d2.y);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){ctx.beginPath();ctx.moveTo(x-width/2,y-height/2);ctx.lineTo(x+width/2,y-height/2);ctx.lineTo(x+width/2,y+height/2);ctx.lineTo(x-width/2,y+height/2);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){ctx.fillStyle=color;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();}
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
大明嘉靖年间，山西一珠宝商被人灭门全家，一仆人被屈打成招后斩首。
随后案情突变，经查真凶实为一流窜惯盗，其赃物里有不少来自被灭门珠宝商。
刑部特意挂牌督办此案，真凶被判凌迟，制造冤案者，包括县令在内六人
问斩，四人绞刑，七人被流放千里，
刑部发布公告，换仆人清白，并为其家人赐银六千两以抚恤。
这便是明朝对制造冤狱者的惩罚力度。
--------------------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas与图标】乡土风金属铝边立方红黄底黑字图像处理图标
【成图】 120*120图标： 大小图： 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>金属铝边立方红黄底黑…...
【开源】A064—基于JAVA的民族婚纱预定系统的设计与实现
🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。 代码可以查看项目链接获取⬇️，记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...
C++实现一个经典计算器（逆波兰算法）附源码
1、本篇要实现的内容 最近，大家讨论计算器的实现比较热，今天我也来用C和Visual Studio实现一个计算器的小程序。这里使用逆波兰算法，能够根据当前用户输入的算式表达式字符串，计算出所要的结果，算式字符串可以包括加、…...
Python知识分享第二十二天-数据结构入门
数据结构 “”" 基础概念: 程序 数据结构 算法 数据结构 存储和组织数据的方式. 算法 解决问题的思维, 思路, 方式. 算法的特性:独立性: 算法 思维, 是解决问题的思路和方式, 不依赖语言.5大特性: 有输入, 有输出, 有穷性, 确定性, 可行性.问: 如何衡量算法的优劣?…...
【WRF理论第十三期】详细介绍 Registry 的作用、结构和内容
目录 1. Introduction：介绍 Registry 的作用和功能。2. Registry Contents：详细描述 Registry 的结构和内容，包括各个部分的条目类型。2.1. DIMSPEC ENTRIES（维度规格条目）2.2. STATE ENTRIES（状态变量条目…...
Android启动优化指南
文章目录 前言一、启动分类与优化目标1、冷启动1.1 优化思路1.2 延迟初始化与按需加载1.3 并行加载与异步执行1.4 资源优化与懒加载1.5 内存优化与垃圾回收控制 2. 温启动2.1 优化应用的生命周期管理2.2 数据缓存与懒加载2.3 延迟渲染与视图优化 3. 热启动3.1 保持应用的状态3.…...
 函数解析)
【ETCD】【源码阅读】configureClientListeners () 函数解析
逐步解析 configureClientListeners 函数 configureClientListeners 是 ETCD 的一个重要函数，用于配置客户端通信的监听器（Client Listeners）。这些监听器主要负责处理外部客户端与 ETCD 服务之间的通信，包括 HTTP 和 gRPC 请求。…...
IO进程学习笔记
man手册 普通命令。系统调用的函数。库函数。特殊文件。文件格式。游戏。附加的一些变量 IO介绍 I：input 输入 O：output 输出 对文件的输入和输出 输入-》写文件，将文件中的内容写到内存中去 输出-》读文件，将内存中的内容读取到文…...
智能手机回暖：华为点火，小米荣耀OV拱火
进入11月中下旬，智能手机圈再度热闹起来。包括华为、小米、OPPO、vivo等诸多手机厂商，都在陆续预热发布新机，其中就包括华为Mate 70、小米Redmi K80、vivo的S20，IQOO Neo10等热门新机，这些热门新机的集中上市迅速吸引了…...
Sqoop导入数据（mysql----＞＞hive）
目录 数据传输流程脚本报错和异常说明1. Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hive.conf.HiveConf2. 数据导入hive后显示NULL 数据传输流程 mysql---->>hdfs---->>hive 数据从mysql表中取出，放到hdfs上（由targ…...
实验3-实时数据流处理-Flink
1.前期准备 （1）Flink基础环境安装 参考文章： 利用docker-compose来搭建flink集群-CSDN博客 显示为这样就成功了 （2）把docker，docker-compose，kafka集群安装配置好 参考文章： …...
深度学习实验十四 循环神经网络（1）——测试简单循环网络的记忆能力
目录 一、数据集构建 1.1数据集的构建函数 1.2加载数据集并划分 1.3 构建Dataset类 二、模型构建 2.1嵌入层 2.2SRN层 2.3模型汇总 三、模型训练 3.1 训练指定长度的数字预测模型 3.2 损失曲线展示 四、模型评价 五、修改 附完整可运行代码 实验大体步骤&#x…...
k8s部署odoo18（kubeshpere面板）
Postgresql部署 链接: kubesphere搭建 postgres15 因为我的是在另一台服务器使用kubesphere进行部署的，如果有和我一样情况的，可以参考上面的文档部署postgreasql。 注意事项： 因为odoo不允许使用postgresql的默认用户，也就是po…...
【模型对比】ChatGPT vs Kimi vs 文心一言那个更好用？数据详细解析，找出最适合你的AI辅助工具！
在这个人工智能迅猛发展的时代，AI聊天助手已经深入我们的工作与生活。你是否曾在选择使用ChatGPT、Kimi或是百度的文心一言时感到一头雾水？每款AI都有其独特的魅力与优势，那么，究竟哪一款AI聊天助手最适合你呢？本文将带…...
Java——容器(单例集合)(上)
一 容器介绍 容器，是用来容纳物体、管理物体。生活中,我们会用到各种各样的容器。如锅碗瓢盆、箱子和包等 程序中的“容器”也有类似的功能，用来容纳和管理数据。比如，如下新闻网站的新闻列表、教育网站的课程列表就是用“容器”来管理 视频…...
如何配置Github并在本地提交代码
前提: 可以流畅访问github, 需要一些上网技巧, 这就自行处理了 申请一个github账号 Github官网地址 首先就是邮箱注册啦, github没有对邮箱的限制, 只要是能收邮件的就ok, qq邮箱, 163等都可以使用. 然后和普通注册账号一样, 一路填写需要的信息, 验证邮箱即可. 如何新增代…...
工作bug，keil5编译器，理解int 类型函数返回值问题，详解！！！
编写不易，禁止搬运，仅供学习，感谢理解 问题现象 下面是一个在keil5里面写的一个，int类型的返回值函数，这个函数里面，只有if else if else这三个判断条件语句，正常来说任何情况下，…...
简明速通Java接口
前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文从代码层面直接整理Java接口 让老油子们无需再理解繁杂的概念了。 Java接口在代码层面是做什么的 说白了老铁，Java的接口就是一个类，这个类中只能声明属性和方法，属性需要…...
MVC基础——市场管理系统（二）
文章目录 项目地址三、Produtcts的CRUD3.1 Products列表的展示页面（Read）3.1.1 给Product的Model里添加Category的属性3.1.2 View视图里展示Product List3.2 增加Product数据（Add）3.2.1 创建ViewModel用来组合多个Model3.2.2 在_ViewImposts里引入ViewModels3.2.3 添加Add的…...
java------------常用API preiod duration 计算时间差
1，preiod 如果末天数比初天数小，需要进一位 package API;import java.time.LocalDate; import java.time.Period;public class preiod {public static void main(String[] args) {// 计算时间差// LocalDate获取对象其中的一个方法LocalDate d1 LocalD…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
在 Spring Boot 中使用 JSP
jsp？ 好多年没用了。重新整一下 还费了点时间，记录一下。 项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
二维FDTD算法仿真
二维FDTD算法仿真，并带完全匹配层，输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...