【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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper分布式服务与Kafka消息队列+ELKF整合方案

前言 ZooKeeper 是一个分布式的、开放源码的分布式应用程序协调服务&#xff0c;提供配置维护、命名服务、分布式同步、组服务等功能&#xff1b; Kafka 是一个开源的分布式流处理平台&#xff0c;它被设计用来处理实时数据流&#xff0c;包括发布和订阅消息系统、日志收集以…

napi系列学习进阶篇——NAPI生命周期

什么是NAPI的生命周期 我们都知道&#xff0c;程序的生命周期是指程序从启动&#xff0c;运行到最后的结束的整个过程。生命周期的管理自然是指控制程序的启动&#xff0c;调用以及结束的方法。 而NAPI中的生命周期又是怎样的呢&#xff1f;如下图所示&#xff1a; 从图上我们…

WordPress 图片压缩插件:Compress JPEG PNG images 使用方法

插件介绍 Compress JPEG & PNG images是一款非常好用的图片压缩插件:&#xff0c;非常值得大家安装使用&#xff1b;特别是图片类型网站。其实我们很多服务器磁盘空间是不在乎多那么几十 MB 大小的&#xff0c;但是压缩了图片能提升网站速度&#xff0c;节省宽带&#xff…

入门:多层感知器Multiple-Layer Perceiver, MLP

本文将简单介绍多层感知器&#xff08;MLP&#xff09;的基本概念、原理和应用。MLP是一种前馈人工神经网络&#xff0c;由多层节点组成&#xff0c;每层节点通过权重和偏置与下一层节点相连。MLP在许多领域都有广泛的应用&#xff0c;如分类、回归、自然语言处理等。 本文将分…

软考数据库---2.SQL语言

主要记忆&#xff1a;表、索引、视图操作语句&#xff1b;数据操作&#xff1b;通配符、转义符&#xff1b;授权&#xff1b;存储过程&#xff1b;触发器 这部分等等整理一下: “”" 1、 数据定义语言。 SQL DDL提供定义关系模式和视图、 删除关系和视图、 修改关系模式的…

基于ssm的大学生租房平台的设计与实现(java源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的大学生租房平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 大学生租房平台的设计与实现的主…

Python数据分析可视化之Pandas的使用

一、项目介绍 数据获取与存储&#xff1a;能够使用Python财经数据接口包tushare下载股票交易数据&#xff0c;并将数据保存到CSV文件或MySQL数据库中。数据处理&#xff1a;能够用Pandas从CSV文件、Excel文件以及MySQL数据库中读取数据。能够使用Pandas对数据进行简单处理和深…

某狗网歌曲接口逆向之加密算法刨析

逆向网址 aHR0cHM6Ly93d3cua3Vnb3UuY29t 逆向链接 aHR0cHM6Ly93d3cua3Vnb3UuY29tL21peHNvbmcvN2dxcGVzNjguaHRtbA 逆向接口 aHR0cHM6Ly93d3dhcGkua3Vnb3UuY29tL3BsYXkvc29uZ2luZm8 逆向过程 请求方式&#xff1a;GET 逆向参数 signature:1898d8f157837fadc9751fdacf1398f9 …

天猫精灵要会员,不能听歌,还能用来干什么呢?榨干它的剩余价值

目录 起因&#xff1a;以听歌为主要功能的设备&#xff0c;却不能听歌了 1.蓝牙音箱 2.控制智能家电 3.万能遥控器&#xff0c;需要一个外接设备 4.倒计时/提醒&#xff0c;闹钟提醒&#xff0c;整点提醒&#xff08;这功能有人不喜欢&#xff0c;闲吵&#xff0c;还不能关…

职场证件照:不只是一张照片那么简单,这些细节请注意

随着毕业季的到来&#xff0c;许多应届生已经开始在各自的岗位上实习&#xff0c;准备迎接转正的挑战。在这个过程中&#xff0c;一张得体的职场证件照将成为你职业生涯中的一张重要名片。在职场中&#xff0c;证件照的应用场景多种多样&#xff0c;从窗口岗位的公示到工作牌上…

Pytorch Windows EOFError: Ran out of input when num_workers>0

关于深度学习的一些学习框架,我使用过pytorch,caffe,caffe2,openchatkit,oneflow等,最近我将长达几十万字的报错手册重新进行了整理,制作出一个新的专栏,主要记录这几种常见的开发框架在安装和使用过程中常见的报错,以及我是如何解决掉的,以此来帮助更多的深度学习开…

紫光展锐T610平台_4G安卓核心板方案定制开发

紫光展锐T610核心板配备Android 11操作系统&#xff0c;采用12nm制程工艺。该处理器CPU由2颗基于Cortex-A75架构的大核心和6颗基于Cortex-A55架构的小核心组成&#xff0c;最高主频为1.8GHz。GPU采用的是614.4MHz的Mali G52&#xff0c;可以流畅播放2400*1080分辨率视频&#x…

maven之pom中的build标签

1、build标签分类 1.1、全局配置&#xff08;project build&#xff09; 针对整个项目的所有情况都有效。 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation"htt…

知道智源开源最强语义向量模型BGE是什么吗?

Embedding模型作为大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;的一个重要辅助&#xff0c;是很多LLM应用必不可少的部分。但是&#xff0c;现实中开源的Emebdding模型却很少。北京智源人工智能研究院&#xff08;BAAI&#xff09;开源了BGE系列Emb…

Proxmox VE qm 方式恢复虚拟机

前言 使用qm 恢复Proxmox VE虚拟机&#xff0c;高效便捷。 登录Proxmox VE shell 执行恢复操作 假设备份好的文件在其它主机存储&#xff0c;我们可以下载到Proxmox VE本地目录下&#xff0c;如何执行虚拟化恢复操作--storage local-lvm&#xff08;恢复后存储到的位置&…

【linux】TCP编程{三次握手/四次挥手/API注意点/代码}

文章目录 1.API介绍1.1wc -l dirName1.2inet_pton1.3inet_aton1.4inet_ntop 2.三次握手与四次挥手1.三次握手2.四次挥手3.应用程序和TCP协议层如何交互总结 3.TCP 和 UDP 对比1.宏观2.详细 4.地址转换函数inet_ntoa 5.TCP编程代码Makefiletcp_client.cctcp_server.cctcp_server…

TypeScript学习--day1

一、介绍 TypeScript是JS的超集&#xff0c;为JS添加了类型支持。 1.1 为什么添加类型支持 JS代码的错误大部分是类型错误&#xff0c;增加改Bug时间&#xff0c;影响开发效率。 静态类型&#xff1a;编译期做类型检查 动态类型&#xff1a;执行期做类型检查 TS--静态类型编…

前端保留两位小数

一、保留两位小数&#xff08;四舍五入&#xff09; 解决方案&#xff1a;使用 toFixed(x) 方法可以对小数进行指定位数保留&#xff0c;其中x是要保留的位数用法&#xff1a;num.toFixed(x)&#xff0c;其中num为需要操作的数据&#xff0c;x为要保留的位数示例&#xff1a;1…

力扣LeetCode138. 复制带随机指针的链表 两种解法(C语言实现)

目录 题目链接 题目分析 题目定位&#xff1a; 解题思路 解题思路1&#xff08;粗暴但是复杂度高&#xff09; 解题思路2&#xff08;巧妙并且复杂度低&#xff09; 题目链接 138. 复制带随机指针的链表https://leetcode-cn.com/problems/copy-list-with-random-pointer/ …

双写一致性问题

双写一致性问题&#xff1a;同一份数据&#xff0c;需要写数据库、写缓存。数据库中的数据和缓存中的数据要一致 解决办法&#xff1a;延迟双删 当我们要进行更新操作时&#xff0c;先删除缓存&#xff0c;再更新数据库&#xff0c;延迟几百ms再删除一次redis的缓存数据。 示…