【Canvas与艺术】绘制黄色三角生化危险标志

【关键点】

系统函数arcTo函数的用法及自编函数createRegTriArr的灵活运用。

【成果图】

【代码】

<!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><img id="myImg" src="125.png" style="display:none;"/></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){window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏        // 得到四个三角形的数组var arr=createRegTriArr(0,0,200);var arrLeft=createRegTriArr(arr[0].x,arr[0].y,20);var arrRight=createRegTriArr(arr[1].x,arr[1].y,20);var arrTop=createRegTriArr(arr[2].x,arr[2].y,20);// 画外轮廓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,20);ctx.lineTo(arrRight[0].x,arrRight[0].y);ctx.arcTo(arrRight[1].x,arrRight[1].y,arrRight[2].x,arrRight[2].y,20);ctx.lineTo(arrTop[1].x,arrTop[1].y);ctx.arcTo(arrTop[2].x,arrTop[2].y,arrTop[0].x,arrTop[0].y,20);ctx.closePath();ctx.lineWidth=20;ctx.strokeStyle="black";ctx.stroke();ctx.fillStyle="rgb(255,211,63)";ctx.fill();// 三个黑实心圆var arr=createRegTriArr(0,0,50);for(var i=0;i<arr.length;i++){var pt=arr[i];ctx.beginPath();ctx.arc(pt.x,pt.y,52,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="black";ctx.fill();}// 三个偏心的黄色实心圆var arr=createRegTriArr(0,0,58);for(var i=0;i<arr.length;i++){var pt=arr[i];ctx.beginPath();ctx.arc(pt.x,pt.y,45,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="rgb(255,211,63)";ctx.fill();}// 黄圈for(var i=0;i<3;i++){var startAngle=i*Math.PI*2/3-Math.PI/28;var endAngle=startAngle+Math.PI/5*2;ctx.beginPath();ctx.arc(0,0,40,startAngle,endAngle,false);ctx.lineWidth=8;ctx.strokeStyle="black";ctx.stroke();}// 三小黄叉var arr=createRegTriArr(0,0,15);for(var i=0;i<arr.length;i++){var pt=arr[i];ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(pt.x,pt.y);ctx.lineWidth=3;ctx.strokeStyle="rgb(255,211,63)";ctx.stroke();}// 中心黄点ctx.beginPath();ctx.arc(0,0,6,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="rgb(255,211,63)";ctx.fill();// 版权ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}// 函数,创建一个二维坐标点
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}// 函数,创建一个以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;
}/*---------------------------------------------
他的难能可贵处在于:
遭遇了那么多的不公、苦难,
包括朋友的背叛、挚爱的人离世等,
他都坚持了自己的初心,
从来没有改变过自己。
他从未丢弃自己的骄傲,
这也是他会成功的主因。
----------------------------------------------*/
//-->
</script>

【原图】

END

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

相机参数的意义

相机标定的意义&#xff1a; 相机标定&#xff1a;使用带有pattern的标定板来求解相机参数的过程&#xff1b;用一个简化的数学模型来代表复杂的三维到二维的成像过程&#xff1b;相机参数包括&#xff1a;相机内参&#xff08;焦距等&#xff09;&#xff0c;外参&#xff08…

Leetcode刷题之合并两个有序数组

Leetcode刷题之合并两个有序数组 一、题目描述二、题目解析 一、题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数…

Kylin-Server-V10-SP3-General-Release-2303-X86_64

Kylin-Server-V10-SP3-General-Release-2303-X86_64 银河麒麟V10 银河蓝色麒麟比红麒麟养眼多了 Kylin-CSDN博客

基于YOLOv8的河道漂浮物实时检测系统【训练和系统源码+Pyside6+数据集+包运行】

✨目录 一、系统概述和展示&#x1f384;1.1 摘要 &#x1f388; 二、一站式使用教程&#x1f384;三、YOLOv8原理剖析&#x1f384;3.1 YOLOv8背景和技术原理&#x1f388; 四、模型训练、评估和推理&#x1f384;4.1 数据集介绍&#x1f388;4.2 模型训练&#x1f388;4.3 结…

springboot-admin使用及原理剖析

服务端 依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>de.codecentric</groupId><art…

SQL语言自用(持续更新)+实验记录

课本:《数据库原理及其应用教程》&#xff08;第四版&#xff09; (主编)黄德才&(副主编)陆亿红 实验&#xff1a;学校实验课材料 其他&#xff1a; [ ]表示可以被删除&#xff0c;也表示可以被替换&#xff0c;请自行判断。如果有一些截图或照片&#xff0c;是暂时懒得整…

ThignsBoard通过服务端订阅共享属性

MQTT基础 客户端 MQTT连接 通过服务端订阅属性 案例 1、首先需要创建整个设备的信息&#xff0c;并复制访问令牌 ​​2、通过工具MQTTX连接上对应的Topic 3、测试链接是否成功 4、在MQTT上订阅对应的Topic 5、在客户端添加共享属性信息 6、查看整个设备的遥测数据 M…

yolov8安全帽检测项目开发(python开发,带有训练模型,可以重新训练,并有Pyqt5界面可视化)

不需要程序&#xff0c;只需要数据集的&#xff0c;想自己搭建模型训练的&#xff0c;可以免费下载&#xff08;积分已经设置为0&#xff09;&#xff1a;https://download.csdn.net/download/qq_40840797/89100918 1.项目介绍&#xff1a;&#xff08;视频运行链接&#xff1…

scala---基础核心知识

一、什么是scala Scala 是一种多范式的编程语言&#xff0c;其设计初衷是要集成面向对象编程和函数式编程的各种特性。Scala运行于Java平台&#xff08;Java虚拟机&#xff09;&#xff0c;并兼容现有的Java程序。 二、为什么要学习scala 1、优雅 2、速度快 3、能融合到hado…

【数据结构】习题之消失的数字和轮转数组

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;前路漫漫亦灿灿 前言 消失的数字这道题目我会和大家分享三种思路。 还有一道题目是轮转数组&#xff0c;&#xff0c;也会分享三种思路&#xff0c;大…

12 Php学习:魔术常量

PHP魔术常量 PHP 向它运行的任何脚本提供了大量的预定义常量。 不过很多常量都是由不同的扩展库定义的&#xff0c;只有在加载了这些扩展库时才会出现&#xff0c;或者动态加载后&#xff0c;或者在编译时已经包括进去了。 有八个魔术常量它们的值随着它们在代码中的位置改…

vscode配置c\c++及美化

文章目录 vscode配置c\c及美化1.安装vscode2.汉化3.安装c\c插件4.安装mingw5.配置mingw6. 运行c代码6.1 创建代码目录6.2 设置文件配置6.3 创建可执行任务&#xff1a;task.json6.4 编译执行6.5 再写其他代码6.6 运行多个c文件 7. 运行c文件8.调式代码8.1 创建launch.json8.2 修…

在 Elasticsearch 中扩展 ML 推理管道:如何避免问题并解决瓶颈

作者&#xff1a;来自 Elastic Iulia Feroli 是时候考虑语义搜索运营了吗&#xff1f; 无论你是一位经验丰富的搜索工程师&#xff0c;希望探索新的人工智能功能&#xff0c;还是一位机器学习专家&#xff0c;希望更多地利用搜索基础设施来增强语义相似性模型 —— 充分利用这…

【大语言模型】轻松本地部署Stable Diffusion

硬件要求&#xff1a; 配备至少8GB VRAM的GPU&#xff0c;如果你的电脑只有CPU&#xff0c;请看到最后。根据部署规模&#xff0c;需要足够的CPU和RAM。 软件要求&#xff1a; Python 3.7或更高版本。支持NVIDIA GPU的PyTorch。Hugging Face的Diffusers库。Hugging Face的Tr…

前端实现自动获取农历日期:探索JavaScript的跨文化编程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

Spring Boot 学习(5)——开发流程:快速入门

花了几天的时间&#xff0c;整出个 “hello spring boot”&#xff0c;并且把它从 2 搞到了 3。 纸上得来终觉浅&#xff01;自己实践出真知&#xff01;现在再回头来囫囵一遍&#xff0c;加深下印象。回想下从前自觉某一编程语言大都如此&#xff0c;先找到简单示例照着画一遍…

Walmart.com DSV XML对接需求

此前的文章Walmart.com DSV EDI对接需求中&#xff0c;为大家介绍了如果选择传输EDI文件需要做的准备与需求。本文将为大家介绍Walmart.com 与DSV&#xff08;Drop Ship Vender&#xff09;之间传输XML文件的需求。与EDI相比&#xff0c;XML文件的处理难度相对低一些。无论企业…

第1章 计算机网络体系结构

王道学习 【考纲内容】 &#xff08;一&#xff09;计算机网络概述 计算机网络的概念、组成与功能&#xff1b;计算机网络的分类&#xff1b; 计算机网络的性能指标 &#xff08;二&#xff09;计算机网络体系结构与参考模型 计算机网络分层结…

Oracle获取对象的DDL创建语句

1.命令行方式&#xff08;如&#xff1a;sqlplus&#xff09; ## 用户 select dbms_metadata.get_ddl(USER,TEST) from dual;## 表 select dbms_metadata.get_ddl(TABLE,TEST,T1) from dual;## 表空间 select dbms_metadata.get_ddl(TABLESPACE,TBS_NAME) from dual;## 索引 s…

内存函数memcpy、mommove、memset、memcmp

目录 1、memcpy函数 memcpy函数的模拟实现 2、memmove函数 memmove函数的模拟实现 3、memset函数 4、memcmp函数 1、memcpy函数 描述&#xff1a; C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 复制 n 个字节到存储区 str1。 声明&…