【Canvas与标志】圆角三角形生化危险警示标志
【成图】
【代码】
<!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…...
)
解决Dcat Admin laravel框架登录报错问题，(blocked:mixed-content)
前言 在使用 Dcat Admin 后台登录时，发生 error 报错：(blocked:mixed-content) xhr VM484:1，浏览器拦截 其实这是浏览器在 HTTPS 页面中尝试加载 HTTP 资源，导致浏览器阻止了这些不安全的请求。 解决 在 .env 文件中添加或修改 AD…...
（三）Sping Boot学习——升级jdk1.8-jdk18
1.修改系统环境变量。 2.idea中修改配置。 3.项目setting中设置修改 4.更新后还要重新下载依赖mvn clean install ，并且记住reload 项目。同时查看java -version查看一下jdk版本。...
语言模型中的多模态链式推理
神经网络的公式推导 简介摘要引言多模态思维链推理的挑战多模态CoT框架多模态CoT模型架构细节编码模块融合模块解码模块 实验结果运行代码补充细节安装包下载Flan-T5数据集准备rougenltkall-MiniLM-L6-v2运行 简介 本文主要对2023一篇论文《Multimodal Chain-of-Thought Reason…...
SCons：下一代构建工具，如何用 Python 驱动高效构建？
在现代软件开发中，构建工具是开发流程中不可或缺的一环。无论是小型项目还是跨平台的复杂工程，选择一个高效、灵活的工具都能显著提高开发效率和代码质量。SCons，一个以 Python 为基础的构建工具，通过自动化依赖管理、灵活的扩展性…...
springboot 整合 rabbitMQ (延迟队列)
前言： 延迟队列是一个内部有序的数据结构，其主要功能体现在其延时特性上。这种队列存储的元素都设定了特定的处理时间，意味着它们需要在规定的时间点或者延迟之后才能被取出并进行相应的处理。简而言之，延时队列被设计用于存放那…...
ES 基本使用与二次封装
概述 基本了解 Elasticsearch 是一个开源的分布式搜索和分析引擎，基于 Apache Lucene 构建。它提供了对海量数据的快速全文搜索、结构化搜索和分析功能，是目前流行的大数据处理工具之一。主要特点即高效搜索、分布式存储、拓展性强 核心功能 全文搜索:…...
分割一切2.0，SAM2详解
🏡作者主页：点击！ 🤖编程探索专栏：点击！ ⏰️创作时间：2024年11月24日20点03分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅…...
Spring AI Fluent API：与AI模型通信的流畅体验
引言 随着人工智能（AI）技术的飞速发展，越来越多的应用场景开始融入AI技术以提升用户体验和系统效率。在Java开发中，与AI模型通信成为了一个重要而常见的需求。为了满足这一需求，Spring AI引入了ChatClient，…...
基于python的长津湖评论数据分析与可视化，使用是svm情感分析建模
引言 研究背景及意义 上世纪初开始，中国电影就以自己独有的姿态登上了世界电影史的舞台。中国电影作为国家文化和思想观念的反映与延伸，能够增强文化自信，在文化输出方面有着极其重要的作用1[1]。 改革开放以来，随着生产力的提高…...
Lucene(2):Springboot整合全文检索引擎TermInSetQuery应用实例附源码
前言 本章代码已分享至Gitee: https://gitee.com/lengcz/springbootlucene01 接上文。Lucene(1):Springboot整合全文检索引擎Lucene常规入门附源码 如何在指定范围内查询。从lucene 7 开始，filter 被弃用，导致无法进行调节过滤。 TermInSetQuery 指定…...
shell完结
声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...
【2024最新】基于Springboot+Vue的智慧食堂系统Lw+PPT
作者：计算机搬砖家 开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。 专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：Java精选实战项…...
NVR小程序接入平台EasyNVR多品牌NVR管理工具：高效管理分散视频资源的解决方案
在当今数字化、智能化的时代背景下，视频监控已成为各行各业不可或缺的一部分，从公共安全到企业运维，再到智慧城市建设，视频资源的管理与应用正面临着前所未有的挑战。如何高效整合、管理这些遍布各地的分散视频资源，成…...
--插入排序)
排序算法(三)--插入排序
文章目录 一、插入排序的基本原理二、插入排序的C语言实现三、代码解析 插入排序 C语言实例 一、插入排序的基本原理 插入排序的基本思想是将数组中的元素逐一取出，然后将其插入到已经排好序的部分中的适当位置，直到整个数组排序完成。具体步骤如下&…...
YOLOv11融合[ECCV 2018]RCAN中的RCAB模块及相关改进思路
YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总 《Image Super-Resolution Using Very Deep Residual Channel Attention Networks》 一、 模块介绍 论文链接：https://arxiv.org/abs/1807…...
排序(Java数据结构)
1. 排序的概念及引用 1.1 排序的概念 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。(所有的排序都是默认从小到大排序) 稳定性：假定在待排序的记录序列中ÿ…...
【Java 解释器模式】实现高扩展性的医学专家诊断规则引擎
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...
【超详细】卷积神经网络CNN基本架构以及工作原理详解
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
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…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...