【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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/34253.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vxe-table 键盘操作,设置按键编辑方式,支持覆盖方式与追加方式

vxe-table 全键盘操作&#xff0c;按键编辑方式设置&#xff0c;覆盖方式与追加方式&#xff1b; 通过 keyboard-config.editMode 设置按键编辑方式&#xff1b;支持覆盖方式编辑和追加方式编辑 安装 npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ... import VxeUI from v…

ros2人脸检测

第一步&#xff1a; 首先在工作空间/src下创建数据结构目录service_interfaces ros2 pkg create service_interfaces --build-type ament_cmake 然后再创建一个srv目录 在里面创建FaceDetect.srv&#xff08;注意&#xff0c;首字母要大写&#xff09; sensor_msgs/Image …

Alogrithm:巴斯卡三角形

巴斯卡三角形&#xff08;Pascals Triangle&#xff09;是一个由数字排列成的三角形&#xff0c;每一行的数字是由前一行的两个相邻数字相加得到的。巴斯卡三角形的每一行对应着二项式展开式的系数。具体如下图所示&#xff1a; 巴斯卡三角形的性质 第 0 行只有一个数字 1。第 …

为什么使用3DMAX插件会出现系统崩溃?

使用3DMAX插件时出现系统崩溃&#xff0c;可能涉及多个方面的原因。以下是一些主要的原因及相应的解决方案&#xff1a; 一、插件兼容性问题 版本不兼容&#xff1a; 旧版插件可能无法与最新版本的3DMAX完全兼容&#xff0c;导致系统崩溃。解决方案&#xff1a;更新插件至最新…

【LeetCode刷题之路】64.最小路径和 (动态规划入门)

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…

【前端学习笔记】Vue2基础

1.介绍 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 构建用户界面&#xff1a;把数据通过某种办法变成用户界面渐进式&#xff1a;Vue可以自底向上逐层的应用&#xff0c;简单应用只需要一个轻量小巧的核心库&#xff0c;复杂应用可以引入各式各样的Vue插件遵循MV…

【在Linux世界中追寻伟大的One Piece】HTTP cookie

目录 1 -> 引入HTTP cookie 1.1 -> 定义 1.2 -> 工作原理 1.3 -> 分类 1.4 -> 安全性 2 -> 认识cookie 2.1 -> 基本格式 2.2 -> GMT vs UTC 3 -> cookie的生命周期 3.1 -> 安全性考虑 3.2 -> 安全测试cookie 3.2.1 -> 测试co…

Echarts使用平面方法绘制三维立体柱状图表

目录 一、准备工作 1.下载引入ECharts库 2.创建容器 二、绘制基本柱状 三、绘制立体柱状方法一 1.定义立方体形状 2.注册立方体形状 3.配置custom系列 4.设置数据 5.渲染图表 四、绘制立体柱状方法二 1.画前知识 2.计算坐标renderItem 函数 &#xff08;1&#x…

考研信息查询系统|Java|SSM|VUE| 前后端分离

【重要1⃣️】前后端源码万字文档部署文档 【包含内容】 【一】项目提供非常完整的源码注释 【二】相关技术栈文档 【三】源码讲解视频 【其它服务】 【一】可以提供远程部署安装&#xff0c;包扩环境 【二】提供软件相关的安装包 【…

[高阶数据结构八] B+树和索引原理深度解析

1.前言 B树并不常用,就是因为有B树的存在. MySQL的索引底层其实就是使用了B树,但是B树和索引都是在了解了B树之后才深度学习的&#xff0c;如果你对于B树海一无所知的话&#xff0c;请阅读下面这篇文章。 [高阶数据结构三] B-树详解_b-树csdn-CSDN博客 本章重点&#xff1a; …

Gitee配置以及如何将本地项目提交到远程仓库

文章目录 准备远程仓库配置注册新建仓库 配置git 生成ssh&#xff0c;输入以下命令&#xff0c;然后连敲三次回车键配置公钥本地代码上传 准备 1.本地下载git 2.注册远程仓库账号 远程仓库配置 注册 官网&#xff1a;https://gitee.com 完成注册 新建仓库 头像->设置-…

圣桥ERP queryForString.dwr SQL注入漏洞复现

0x01 产品描述: 杭州圣乔科技有限公司主要研发全套工业企业ERP系列软件产品,现在公司已经形成ERP 软件、OA办公管理、等四大系列二十小类软件产品。致力于为政府、教育、医疗卫生、文化事业、公共事业(电、水、气等)、交通、住建、应急、金融、电信运营商、企业等用户提供专…

基于MFC框架用C++做一个记账本

目录 一、前言 二、主要功能和技术点 1.主要功能 2.主要技术点 三、准备工作 1.SQLite数据库操作工具 2.SqLiteCpp第三方库 3.安装office导入Excel需要的接口 3.1具体步骤 四、主界面 1.自定义窗口背景 1.1消息映射 1.2选择背景图片 1.3绘制背景 1.4静态控件透明…

qemu搭建aarch64

qemu工具搭建aarch64系统 下载准备 下载qemu: https://qemu.weilnetz.de/w64/2022/qemu-w64-setup-20220831.exe 下载固件&#xff1a;https://publishing-ie-linaro-org.s3.amazonaws.com/releases/components/kernel/uefi-linaro/16.02/release/qemu64/QEMU_EFI.fd?Signat…

Zookeeper3.6.3集群安装

Zookeeper3.6.3三节点集群安装 为保证集群高可用&#xff0c;Zookeeper 集群的节点数最好是奇数&#xff0c;最少有三个节点&#xff0c;所以这里搭建一个三个节点的集群。(在一个节点模拟三节点&#xff0c;真实的三节点把ip替换一下即可&#xff0c;按照hadoop案件把网络打通…

下一代 RAG 技术来了!微软正式开源 GraphRAG

省流总结 优点&#xff1a;检索准确度高 缺点&#xff1a;单个19w字构建用时4分30s、gpt4 token花费12美元 概述 7 月 2 日&#xff0c;微软开源了 GraphRAG&#xff0c;一种基于图的检索增强生成 (RAG) 方法&#xff0c;可以对私有或以前未见过的数据集进行问答。在 GitHub…

MySQL索引(四):字符串索引

前缀索引 MySQL是支持前缀索引的&#xff0c; 也就是说&#xff0c; 你可以定义字符串的一部分作为索引。 默认地&#xff0c;如果你创建索引的语句不指定前缀长度&#xff0c; 那么索引就会包含整个字符串。 使用前缀索引的优缺点&#xff1a; 1&#xff09;优点&#xff1a…

获取剪切板的图片 -> File -> Base64 -> Blob -> url -> Image,以及它们之间的各种相互转换

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 一、获取剪切板的图片&#xff08;拿到 File 对象&#xff09; js粘贴事件paste简单解析及遇到的坑 - 云社区 - 腾讯云 (tencent.com) document.addEventListener(paste, f…

实战八:模拟京东购物流程

问题描述&#xff1a; 从键盘录入5个商品信息&#xff08;1001手机&#xff09;添加到商品列表中&#xff0c;展示商品信息,提示用户选择商品&#xff0c;用户选中的商品添加到购物车中&#xff08;购物车中的商品要逆序)&#xff0c;用户选中的商品不存在需要有相应提示&#…

Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)

目录 1、确认浏览器的版本 2、找到对应的chromedriver版本 3、解压chromedriver文件&#xff0c;放置chrome的安装目录下 4、设置系统属性 5、确认chromedriver是否安装成功及解决方式 1、确认浏览器的版本 在浏览器的地址栏&#xff0c;输入chrome://version/&#x…