【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…...
【Python 教程】如何将 JSON 数据转换为 Excel 工作表
pagehelper整合 引入依赖com.github.pagehelperpagehelper-spring-boot-starter2.1.0compile编写代码 GetMapping("/list/{pageNo}") public PageInfo findAll(PathVariable int pageNo) {// 设置当前页码和每页显示的条数PageHelper.startPage(pageNo, 10);// 查询数…...
智能管控硬件设备：FanControl散热管理工具全攻略
智能管控硬件设备：FanControl散热管理工具全攻略 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanC…...
PostgreSQL表膨胀避坑指南：从监控到优化的完整解决方案
PostgreSQL表膨胀避坑指南：从监控到优化的完整解决方案 PostgreSQL作为一款强大的开源关系型数据库，在企业级应用中扮演着重要角色。然而，随着数据量的增长和业务复杂度的提升，表膨胀问题逐渐成为许多DBA和开发者的"隐形杀手…...
告别SD卡！用ADB在Windows PowerShell里给开发板传文件，保姆级避坑指南
告别SD卡！用ADB在Windows PowerShell里给开发板传文件，保姆级避坑指南 嵌入式开发中，文件传输一直是个高频痛点。每次修改代码后，传统方式要么拔出SD卡用读卡器拷贝，要么搭建FTP/NFS网络共享，不仅步骤繁琐…...
BLIP-Diffusion实战解析：如何通过预训练主题表示实现高效可控的图像生成
1. BLIP-Diffusion的核心创新点解析 第一次看到BLIP-Diffusion这个模型时，最让我惊讶的是它解决了一个困扰行业多年的难题：如何在不需要反复微调的情况下，让AI生成的图像既保持输入主题的特征，又能灵活响应文本指令。这就像教一个…...
实时语音合成全解析：技术原理、应用场景与未来展望
实时语音合成全解析：技术原理、应用场景与未来展望 引言 在人工智能浪潮席卷全球的今天，让机器“开口说话”已不再是科幻场景。实时语音合成（Real-Time TTS） 技术，作为连接数字世界与人类听觉的桥梁，正以…...
Java 开发 日志技术
1.概述为什么要在程序中记录日志呢？便于追踪应用程序中的数据信息、程序的执行过程。便于对应用程序的性能进行优化。便于应用程序出现问题之后，排查问题，解决问题。便于监控系统的运行状态。2.日志框架JUL：这是JavaSE平台提供的官…...
深度解析Scratch-www：模块化架构如何支撑全球最大编程教育平台
深度解析Scratch-www：模块化架构如何支撑全球最大编程教育平台 【免费下载链接】scratch-www Standalone web client for Scratch 项目地址: https://gitcode.com/gh_mirrors/scr/scratch-www Scratch-www作为全球最大的少儿编程教育平台Scratch的独立Web客户…...
揭秘USDT混币器：从智能合约代码到浏览器控制台，一次匿名转账的完整技术栈解析
揭秘USDT混币器：从智能合约代码到浏览器控制台的技术全景 在区块链世界中，隐私保护与交易透明性似乎是一对永恒的矛盾。当每一笔USDT转账都能被链上浏览器追踪到资金流向时，一种名为"混币器"的技术方案正在用密码学重新定义匿名边界…...
calibre-do-not-translate-my-path技术解析：解决中文路径翻译问题的本地化方案实践指南
calibre-do-not-translate-my-path技术解析：解决中文路径翻译问题的本地化方案实践指南 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文（中文…...