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

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

news 2026/2/10 16:59:58

【成图】

【代码】

<!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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2026/2/8 4:32:38

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2026/1/21 18:20:51

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2026/2/6 2:13:58

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡背景我们以建设星云智控官网来做AI编程实践，很多人以为AI已经强大到不需要程序员了，其实不是，AI更加需要程序员，普通人…...

编程新知 2026/2/5 21:24:11

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图，如果边框加在dom上面，pdf-lib导出svg的时候并不会导出边框，所以只能在echarts图上面加边框 grid的边框是在图里…...

编程新知 2026/2/2 1:03:13

【成图】

【代码】

END

相关文章：