当前位置：首页 > news >正文

【Canvas与标志】圆角三角形生化危险警示标志

news 2026/1/2 4:29:36

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>圆角三角形生化危险警示标志 Draft1</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();var r=R*1.00;ctx.fillStyle="black";        drawRoundTriangle(ctx,0,0,r,R/6);ctx.fill();ctx.restore();    // 第2圈ctx.save();var r=R*0.98;ctx.fillStyle="rgb(160,160,160)";        drawRoundTriangle(ctx,0,0,r,R/6-R*0.02);ctx.fill();ctx.restore();    // 第3圈ctx.save();var r=R*0.94;ctx.fillStyle="black";        drawRoundTriangle(ctx,0,0,r,R/6-R*0.02-R*0.04);ctx.fill();ctx.restore();// 第4圈ctx.save();var r=R*0.90;ctx.fillStyle="rgb(255,230,130)";        drawRoundTriangle(ctx,0,0,r,R/6-R*0.02-R*0.04-R*0.04);ctx.fill();ctx.restore();// 第5圈ctx.save();var r=R*0.77;var gnt=ctx.createRadialGradient(0,0,0,0,0,r);// 辐射渐变gnt.addColorStop(0,"rgb(253,211,41)");gnt.addColorStop(0.8,"rgb(253,211,41)");gnt.addColorStop(1,"rgb(150,120,1)");ctx.fillStyle=gnt;//"rgb(253,211,41)";        drawRoundTriangle(ctx,0,0,r,R/8);ctx.fill();ctx.restore();// 生化标志ctx.save();var r=R*0.3;drawBioSymbol(ctx,0,0,r,"black","rgb(253,211,41)");ctx.restore();// 玻璃光ctx.save();var r=R*1.00;  drawRoundTriangle(ctx,0,0,r,R/6);ctx.clip();var angle=Math.PI+Math.PI/12;var a=createPt(r*Math.cos(angle),r*Math.sin(angle));angle=-Math.PI/2;var c=createPt(r*1.2*Math.cos(angle),r*1.2*Math.sin(angle));angle=Math.PI/12;var b=createPt(r*Math.cos(angle),r*Math.sin(angle));ctx.fillStyle="rgba(190,190,190,0.2)";ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.lineTo(c.x,c.y);ctx.closePath();ctx.fill();ctx.restore();    writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制生化警示标志
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
radius:基准半径
fgColor:前景颜色
bgColor:背景颜色
----------------------------------------------------------*/
function drawBioSymbol(ctx,x,y,radius,fgColor,bgColor){ctx.save();ctx.translate(x,y);const R=radius;const N=3;// 三黑色大圆for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var d=0.8*R;var a=createPt(d*Math.cos(theta),d*Math.sin(theta));ctx.fillStyle=fgColor;ctx.beginPath();ctx.arc(a.x,a.y,R*0.85,0,Math.PI*2,false);ctx.closePath();        ctx.fill();}// 三黄色大圆for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var d=0.95*R;var a=createPt(d*Math.cos(theta),d*Math.sin(theta));ctx.fillStyle=bgColor;ctx.beginPath();ctx.arc(a.x,a.y,R*0.7,0,Math.PI*2,false);ctx.closePath();        ctx.fill();}// 三覆盖缺口的黄色梯形for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var rIn=1.63*R;var rOut=1.68*R;const PART=Math.PI/20;var a=createPt(rIn*Math.cos(theta-PART),rIn*Math.sin(theta-PART));var b=createPt(rOut*Math.cos(theta-PART),rOut*Math.sin(theta-PART));var c=createPt(rOut*Math.cos(theta+PART),rOut*Math.sin(theta+PART));var d=createPt(rIn*Math.cos(theta+PART),rIn*Math.sin(theta+PART));ctx.fillStyle=bgColor;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.closePath();        ctx.fill();}// 三环for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var d=0.05*R;var omega=createPt(d*Math.cos(theta),d*Math.sin(theta));var rIn=0.4*R;var rOut=0.56*R;var angle=Math.PI/5;var a=createPt(omega.x+rIn*Math.cos(theta-angle),omega.y+rIn*Math.sin(theta-angle));var b=createPt(omega.x+rOut*Math.cos(theta-angle),omega.y+rOut*Math.sin(theta-angle));var c=createPt(omega.x+rOut*Math.cos(theta+angle),omega.y+rOut*Math.sin(theta+angle));var d=createPt(omega.x+rIn*Math.cos(theta+angle),omega.y+rIn*Math.sin(theta+angle));ctx.fillStyle=fgColor;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.arc(omega.x,omega.y,rOut,theta-angle,theta+angle,false);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.arc(omega.x,omega.y,rIn,theta+angle,theta-angle,true);ctx.closePath();        ctx.fill();}// 三斜杠for(var i=0;i<N;i++){var theta=Math.PI*2/N*i+Math.PI/6;var d=0.3*R;var a=createPt(d*Math.cos(theta),d*Math.sin(theta));ctx.strokeStyle=bgColor;ctx.lineWidth=R/20;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(0,0);ctx.closePath();        ctx.stroke();}// 中心圆ctx.fillStyle=bgColor;ctx.beginPath();ctx.arc(0,0,R*0.12,0,Math.PI*2,false);ctx.closePath();        ctx.fill();ctx.restore();    
}/*----------------------------------------------------------
函数:用于绘制圆角正三角形
ctx:绘图上下文
x:三角形中心横坐标
y:三角形中心纵坐标
r:三角形中心到顶点的长度
filletRadius:圆角半径
----------------------------------------------------------*/
function drawRoundTriangle(ctx,x,y,r,filletRadius){var arr=createRegTriArr(x,y,r);var arrLeft=createRegTriArr(arr[0].x,arr[0].y,filletRadius);var arrRight=createRegTriArr(arr[1].x,arr[1].y,filletRadius);var arrTop=createRegTriArr(arr[2].x,arr[2].y,filletRadius);ctx.beginPath();ctx.moveTo(arrTop[0].x,arrTop[0].y);ctx.lineTo(arrLeft[2].x,arrLeft[2].y);ctx.arcTo(arrLeft[0].x,arrLeft[0].y,arrLeft[1].x,arrLeft[1].y,filletRadius);ctx.lineTo(arrRight[0].x,arrRight[0].y);ctx.arcTo(arrRight[1].x,arrRight[1].y,arrRight[2].x,arrRight[2].y,filletRadius);ctx.lineTo(arrTop[1].x,arrTop[1].y);ctx.arcTo(arrTop[2].x,arrTop[2].y,arrTop[0].x,arrTop[0].y,filletRadius);ctx.closePath();
}/*----------------------------------------------------------
函数:创建一个以x,y为中心，r为半径的正三角形数组
ctx:绘图上下文
x:三角形中心横坐标
y:三角形中心纵坐标
r:三角形中心到顶点的长度
arr[0]为右下，arr[1]为左下，arr[2]为正上。
----------------------------------------------------------*/
function createRegTriArr(x,y,r){var arr=new Array();for(var i=0;i<3;i++){var theta=Math.PI*2/3*i+Math.PI/6;var pt=createPt(r*Math.cos(theta)+x,r*Math.sin(theta)+y);arr.push(pt);}return arr;
}/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
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与标志】圆角三角形生化危险警示标志

【成图】【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>圆角三角形生化危险警示标志 Draft1</title><style type&qu…...

编程日记 2024/11/25 14:25:43

解决Dcat Admin laravel框架登录报错问题，(blocked:mixed-content)

前言在使用 Dcat Admin 后台登录时，发生 error 报错：(blocked:mixed-content) xhr VM484:1，浏览器拦截其实这是浏览器在 HTTPS 页面中尝试加载 HTTP 资源，导致浏览器阻止了这些不安全的请求。解决在 .env 文件中添加或修改 AD…...

编程日记 2024/11/25 14:22:39

（三）Sping Boot学习——升级jdk1.8-jdk18

1.修改系统环境变量。 2.idea中修改配置。 3.项目setting中设置修改 4.更新后还要重新下载依赖mvn clean install ，并且记住reload 项目。同时查看java -version查看一下jdk版本。...

编程日记 2024/11/25 14:20:35

语言模型中的多模态链式推理

神经网络的公式推导简介摘要引言多模态思维链推理的挑战多模态CoT框架多模态CoT模型架构细节编码模块融合模块解码模块实验结果运行代码补充细节安装包下载Flan-T5数据集准备rougenltkall-MiniLM-L6-v2运行简介本文主要对2023一篇论文《Multimodal Chain-of-Thought Reason…...

编程日记 2024/11/25 14:16:30

SCons：下一代构建工具，如何用 Python 驱动高效构建？

在现代软件开发中，构建工具是开发流程中不可或缺的一环。无论是小型项目还是跨平台的复杂工程，选择一个高效、灵活的工具都能显著提高开发效率和代码质量。SCons，一个以 Python 为基础的构建工具，通过自动化依赖管理、灵活的扩展性…...

编程日记 2024/11/25 14:15:29

springboot 整合 rabbitMQ (延迟队列)

前言： 延迟队列是一个内部有序的数据结构，其主要功能体现在其延时特性上。这种队列存储的元素都设定了特定的处理时间，意味着它们需要在规定的时间点或者延迟之后才能被取出并进行相应的处理。简而言之，延时队列被设计用于存放那…...

编程日记 2024/11/25 14:14:27

ES 基本使用与二次封装

概述基本了解 Elasticsearch 是一个开源的分布式搜索和分析引擎，基于 Apache Lucene 构建。它提供了对海量数据的快速全文搜索、结构化搜索和分析功能，是目前流行的大数据处理工具之一。主要特点即高效搜索、分布式存储、拓展性强核心功能全文搜索:…...

编程日记 2024/11/25 14:11:22

分割一切2.0，SAM2详解

🏡作者主页：点击！ 🤖编程探索专栏：点击！ ⏰️创作时间：2024年11月24日20点03分神秘男子影, 秘而不宣藏。泣意深不见, 男子自持重, 子夜独自沉。论文链接点击开启你的论文编程之旅…...

编程日记 2024/11/25 14:10:21

Spring AI Fluent API：与AI模型通信的流畅体验

引言随着人工智能（AI）技术的飞速发展，越来越多的应用场景开始融入AI技术以提升用户体验和系统效率。在Java开发中，与AI模型通信成为了一个重要而常见的需求。为了满足这一需求，Spring AI引入了ChatClient&#xff0c…...

编程日记 2024/11/25 14:08:18

基于python的长津湖评论数据分析与可视化，使用是svm情感分析建模

引言研究背景及意义上世纪初开始，中国电影就以自己独有的姿态登上了世界电影史的舞台。中国电影作为国家文化和思想观念的反映与延伸，能够增强文化自信，在文化输出方面有着极其重要的作用1[1]。改革开放以来，随着生产力的提高…...

编程日记 2024/11/25 14:06:14

Lucene(2):Springboot整合全文检索引擎TermInSetQuery应用实例附源码

前言本章代码已分享至Gitee: https://gitee.com/lengcz/springbootlucene01 接上文。Lucene(1):Springboot整合全文检索引擎Lucene常规入门附源码如何在指定范围内查询。从lucene 7 开始，filter 被弃用，导致无法进行调节过滤。 TermInSetQuery 指定…...

编程日记 2024/11/25 14:03:10

shell完结

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2024/11/25 14:00:06

【2024最新】基于Springboot+Vue的智慧食堂系统Lw+PPT

作者：计算机搬砖家开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：Java精选实战项…...

编程日记 2024/11/25 13:59:05

NVR小程序接入平台EasyNVR多品牌NVR管理工具：高效管理分散视频资源的解决方案

在当今数字化、智能化的时代背景下，视频监控已成为各行各业不可或缺的一部分，从公共安全到企业运维，再到智慧城市建设，视频资源的管理与应用正面临着前所未有的挑战。如何高效整合、管理这些遍布各地的分散视频资源，成…...

编程日记 2024/11/25 13:53:58

排序算法(三)--插入排序

文章目录一、插入排序的基本原理二、插入排序的C语言实现三、代码解析插入排序 C语言实例一、插入排序的基本原理插入排序的基本思想是将数组中的元素逐一取出，然后将其插入到已经排好序的部分中的适当位置，直到整个数组排序完成。具体步骤如下&…...

编程日记 2024/11/25 13:50:53

YOLOv11融合[ECCV 2018]RCAN中的RCAB模块及相关改进思路

YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总《Image Super-Resolution Using Very Deep Residual Channel Attention Networks》一、模块介绍论文链接：https://arxiv.org/abs/1807…...

编程日记 2024/11/25 13:45:46

排序(Java数据结构)

1. 排序的概念及引用 1.1 排序的概念排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。(所有的排序都是默认从小到大排序) 稳定性：假定在待排序的记录序列中&#xff…...

编程日记 2024/11/25 13:44:44

【Java 解释器模式】实现高扩展性的医学专家诊断规则引擎

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2024/11/25 13:43:44

【超详细】卷积神经网络CNN基本架构以及工作原理详解

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2024/11/25 13:42:41

Html前后端Ajax交互数据前端JavaScript脚本后台C#ashx服务

本示例使用设备：https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1bU8Fdbo&ftt&id615391857885 前端以GET模式向后台请求数据 function MyGetAjax() {var xhr new XMLHttpRequest();xhr.open(GET, http://192.168.1.211/HttpReader.ash…...

编程日记 2024/11/25 13:41:39

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/12/21 5:00:07

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。代码 Python多线程爬虫教程核心概念多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...

编程新知 2025/12/16 18:04:55

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言今天的每一份坚持，都是在为未来积攒底气。案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...

编程新知 2025/12/31 9:32:40

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

CSS | transition 和 transform的用处和区别

省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构定向转发机制

目录节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...

编程新知 2026/1/1 1:15:06

【成图】

【代码】

END

相关文章：