【Canvas与艺术】玻璃光小红灯

news2025/2/23 17:03:27

【成图】

【代码】

<!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;// 基准尺寸

        //最外圈
        ctx.save();
        var r=R*1.00;
        var gnt1=ctx.createLinearGradient(0,-r,0,r);
        gnt1.addColorStop(0,"rgb(175,179,182)");
        gnt1.addColorStop(0.125,"rgb(106,112,116)");
        gnt1.addColorStop(0.25,"rgb(248,248,248)");
        gnt1.addColorStop(0.5,"rgb(82,87,91)");
        gnt1.addColorStop(0.75,"rgb(31,29,30)");
        gnt1.addColorStop(1,"rgb(27,27,27)");
        drawSolidCircle(ctx,0,0,r,gnt1);
        ctx.restore();

        // 第二圈
        ctx.save();
        var r=R*0.95;
        var gnt1=ctx.createLinearGradient(0,-r,0,r);
        gnt1.addColorStop(0,"rgb(196,196,196)");
        gnt1.addColorStop(0.125,"rgb(99,99,99)");
        gnt1.addColorStop(0.25,"rgb(44,44,44)");
        gnt1.addColorStop(0.5,"rgb(31,31,31)");
        gnt1.addColorStop(0.75,"rgb(83,83,83)");
        gnt1.addColorStop(1,"rgb(253,253,253)");
        drawSolidCircle(ctx,0,0,r,gnt1);
        ctx.restore();

        // 第3圈
        ctx.save();
        var r=R*0.92;
        var gnt1=ctx.createLinearGradient(-r,-r,r,r);
        gnt1.addColorStop(0,"rgb(72,72,72)");
        gnt1.addColorStop(1,"rgb(237,237,237)");
        drawSolidCircle(ctx,0,0,r,gnt1);
        ctx.restore();

        // 黑圈
        ctx.save();
        var r=R*0.91;
        drawSolidCircle(ctx,0,0,r,"black");
        ctx.restore();

        // 暗红圈
        ctx.save();
        var r=R*0.71;
        drawSolidCircle(ctx,0,0,r,"rgb(85,0,0)");
        ctx.restore();

        // 暗红圈
        ctx.save();
        var r=R*0.51;
        drawSolidCircle(ctx,0,0,r,"rgb(128,0,0)");
        ctx.restore();

        // 半红圈
        ctx.save();
        var r=R*0.31;
        var gnt=ctx.createRadialGradient(0,0,0,0,0,r);
        gnt.addColorStop(0,"rgb(255,231,216)");
        gnt.addColorStop(0.1,"rgb(255,205,107)");
        gnt.addColorStop(0.2,"rgb(255,194,104)");
        gnt.addColorStop(0.3,"rgb(217,13,0)");
        gnt.addColorStop(0.4,"rgb(254,101,4)");
        gnt.addColorStop(0.5,"rgb(211,0,0)");
        gnt.addColorStop(0.7,"rgb(165,0,0)");
        gnt.addColorStop(0.85,"rgb(129,0,0)");
        gnt.addColorStop(1,"rgb(143,0,0)");
        ctx.fillStyle=gnt;
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();

        // 画扇形
        ctx.save();
        var rOut=R*0.83;
        var rIn=R*0.28;
        var glassColor="rgba(232,232,232,0.6)";

        // 左边扇形
        var startAngle=-Math.PI/4*3;
        var endAngle=-Math.PI/4*3+Math.PI/12;        
        drawFan(ctx,0,0,rIn,rOut,startAngle,endAngle,glassColor);

        // 中间扇形
        var startAngle=-Math.PI/2-Math.PI/12;
        var endAngle=-Math.PI/2+Math.PI/12;        
        drawFan(ctx,0,0,rIn,rOut,startAngle,endAngle,glassColor);

        // 右边扇形
        var startAngle=-Math.PI/4-Math.PI/12;
        var endAngle=-Math.PI/4;        
        drawFan(ctx,0,0,rIn,rOut,startAngle,endAngle,glassColor);

        // 覆盖外圈
        var rOut=R*0.65;
        var rIn=R*0.57;
        var coverColor="rgb(85,0,0)";
        var startAngle=-Math.PI/4*3;
        var endAngle=-Math.PI/4;
        drawFan(ctx,0,0,rIn,rOut,startAngle,endAngle,coverColor);

        // 覆盖内圈
        var rOut=R*0.46;
        var rIn=R*0.36;
        var coverColor="rgb(128,0,0)";
        var startAngle=-Math.PI/4*3;
        var endAngle=-Math.PI/4;
        drawFan(ctx,0,0,rIn,rOut,startAngle,endAngle,coverColor);

        ctx.restore();
        
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制扇形
ctx:绘图上下文
x:扇形圆心心横坐标
y:扇形圆心纵坐标
rIn:扇形内径
rOut:扇形外径
startAngle:起始角度
endAngle:中止角度
style:填充方案
----------------------------------------------------------*/
function drawFan(ctx,x,y,rIn,rOut,startAngle,endAngle,style){
    var a=createPt(x+rIn*Math.cos(startAngle),y+rIn*Math.sin(startAngle));
    var b=createPt(x+rOut*Math.cos(startAngle),y+rOut*Math.sin(startAngle));
    var c=createPt(x+rOut*Math.cos(endAngle),y+rOut*Math.sin(endAngle));
    var d=createPt(x+rIn*Math.cos(endAngle),y+rIn*Math.sin(endAngle));

    ctx.fillStyle=style;
    //ctx.strokeStyle="white";
    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.arc(0,0,rOut,startAngle,endAngle,false);
    ctx.lineTo(c.x,c.y);
    ctx.lineTo(d.x,d.y);
    ctx.arc(0,0,rIn,endAngle,startAngle,true);
    ctx.closePath();
    //ctx.stroke();
    ctx.fill();
}

/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){
    ctx.fillStyle=style;
    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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RFID学习

RFID学习

24.10.5学习目录 一.简介1.组成2.RFID协议3.RFID卡 一.简介 RFID被称为无线射频识别&#xff0c;其是一种通信技术&#xff0c;通过无线电讯号耦合识别特定目标并读写相关数据&#xff1b; RFID主要位于典型物联网架构中的感知层&#xff0c;其因为具有非接触式特性&#xff…
阅读更多...
数据结构与算法篇（树 - 常见术语）

数据结构与算法篇（树 - 常见术语）

目录 一、什么是树&#xff1f; 二、相关术语 根结点 边 叶子结点 兄弟结点 祖先结点 结点的大小 树的层 结点的深度 结点的高度 树的高度 斜树 一、什么是树&#xff1f; 树是一种类似于链表的数据结构&#xff0c;不过链表的结点是以线性方式简单地指向其后继结…
阅读更多...
STM32驱动直流电机

STM32驱动直流电机

stm32通过PWM控制直流电机的方向和速度。 小直流电机需要几百毫安的电流&#xff0c;单片机只能提供几毫安的电流。电机内线圈转动时切割磁感线以及电机内转子线圈的电感效应都会产生反电动势&#xff0c;损坏芯片。 电机驱动芯片能够作为STM32驱动电机的帮手。 SLEEP暂停工作…
阅读更多...
Linux环境下的日志文件的实现

Linux环境下的日志文件的实现

目录 日志 相关函数 time函数 localtime函数 va_list类型 vsnprintf函数 宏支持可变参数 __FILE__和__LINE__ 完整代码 Log.hpp 标记黏合操作符##&#xff08;重点&#xff09; LockGuard.hpp 日志 基本概念&#xff1a;用于记录软件运行时的信息&#xff0c…
阅读更多...
数据结构与算法——Java实现 30.合并多个有序链表 小顶堆实现

数据结构与算法——Java实现 30.合并多个有序链表 小顶堆实现

后来我们都走了很久&#xff0c;远到提及往事时&#xff0c; 总会加上once upon a time —— 24.10.6 23. 合并 K 个升序链表 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1…
阅读更多...
linux桌面软件（wps）内嵌到主窗口后的关闭问题

linux桌面软件（wps）内嵌到主窗口后的关闭问题

程序测试环境是&#xff1a;slackware系统&#xff0c;属于linux系统&#xff0c;有桌面&#xff08;Xface Session&#xff09;。系统镜像是&#xff1a;slackware64-15.0-install-dvd.iso。qt、c代码实现。 问题描述&#xff1a;延续上一篇文章&#xff0c;将wps软件窗口内嵌…
阅读更多...
中断系统的原理

中断系统的原理

一、介绍 中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的。中断是指‌CPU在正常运行程序时&#xff0c;由于内部或外部事件的发生&#xff0c;导致CPU中断当前运行的程序&#xff0c;转而去执行其他程序的过程。‌ 中断可以是硬件产生的&#xff0c;也可以是…
阅读更多...
神经网络激活函数列表大全及keras中的激活函数定义

神经网络激活函数列表大全及keras中的激活函数定义

一、概述 在机器学习中&#xff0c;激活函数是神经网络中的一种函数&#xff0c;用于在神经网络的每个神经元中引入非线性。没有激活函数&#xff0c;神经网络就无法学习复杂的模式&#xff0c;因为线性变换的组合仍然是线性的。 在神经网络的每层中&#xff0c;将该层所有输…
阅读更多...
ElasticSearch备考 -- Multi match

ElasticSearch备考 -- Multi match

一、题目 索引task有3个字段a、b、c&#xff0c;写一个查询去匹配这三个字段为mom&#xff0c;其中b的字段评分比a、c字段大一倍&#xff0c;将他们的分数相加作为最后的总分数 二、思考 通过题目要求对多个字段进行匹配查询&#xff0c;可以考虑multi match、bool query操作。…
阅读更多...
计算机毕业设计 基于Python的人事管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

计算机毕业设计 基于Python的人事管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…
阅读更多...
108页PPT丨OGSM战略规划框架：实现企业目标的系统化方法论

108页PPT丨OGSM战略规划框架：实现企业目标的系统化方法论

OGSM战略规划框架是一种实现企业目标的系统化方法论&#xff0c;它通过将组织的目标&#xff08;Objectives&#xff09;、目标&#xff08;Goals&#xff09;、策略&#xff08;Strategies&#xff09;和衡量指标&#xff08;Measures&#xff09;进行系统化整合&#xff0c;确…
阅读更多...
Luminar财务造假风波：激光雷达龙头的困境与挑战

Luminar财务造假风波：激光雷达龙头的困境与挑战

近日，美国激光雷达上市公司Luminar被爆出财务造假嫌疑，这一消息震惊了整个行业。Luminar，这家曾风光无限的激光雷达公司，最高市值一度达到120亿美元，其年轻的创始人也因此坐拥豪宅豪车无数。然而，如今在市值仅剩5亿美元左右的时候，却被爆出如此丑闻，令人不禁唏嘘。 带…
阅读更多...
字符设备驱动过程

字符设备驱动过程

阅读更多...
系统架构设计师-论文题（2021年下半年）

系统架构设计师-论文题（2021年下半年）

1.试题一 论面向方面的编程技术及其应用针对应用开发所面临的规模不断扩大、复杂度不断提升的问题&#xff0c;面向方面的编程Aspect Oriented Programming,AOP技术提供了一种有效的程序开发方法。为了理解和完成一个复杂的程序&#xff0c;通常要把程序进行功能划分和封装。一…
阅读更多...
tcp/ip、以太网、mqtt、modbus/tcp复习

tcp/ip、以太网、mqtt、modbus/tcp复习

1.osi参考模型 2. modbus是应用层报文传输协议&#xff0c;没有规定物理层&#xff0c;只规定了协议帧&#xff0c;但是定义了控制器能够认识和使用的消息结构&#xff0c;不管它们是经过何种网络进行通信的&#xff0c;具有很强的适应性。 一主多从&#xff0c;同一时间主机…
阅读更多...
Linux网络命令：如何查看linux系统防火墙开放的端口有哪些？多种方法来查看系统开放的网络端口号，包括TCP端口和UDP端口

Linux网络命令：如何查看linux系统防火墙开放的端口有哪些？多种方法来查看系统开放的网络端口号，包括TCP端口和UDP端口

目录 一、概述 二、查看防火墙开放的端口号的常用方法 &#xff08;一&#xff09;、使用firewalld&#xff08;适用于CentOS/RHEL 7&#xff09; 1. 查看firewalld状态 2. 查看所有开放的端口 3. 查看指定zone&#xff08;如public&#xff09;的开放端口 (二)、使用ipt…
阅读更多...
2024/10/6 计组存储系统大题专训

2024/10/6 计组存储系统大题专训

2010&#xff1a;
阅读更多...
基于SpringBoot+Vue+Uniapp的植物园管理小程序系统(2024最新，源码+文档+远程部署+讲解视频等)

基于SpringBoot+Vue+Uniapp的植物园管理小程序系统(2024最新，源码+文档+远程部署+讲解视频等)

3. 论文参考 4. 项目运行截图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring …
阅读更多...
眼儿媚​·秋雨绵绵窗暗暗

眼儿媚​·秋雨绵绵窗暗暗

因患久治未愈的基础病 ——“肺气肿、哮喘、支扩吐血”等严重的呼吸道疾病&#xff0c;年近72岁的笔者于2017年初夏季节&#xff0c;情非得已地放弃半个多世纪习惯了的都市生活&#xff0c;来到成都市崇州市街子古镇寄居养病、养老&#xff0c;而今已逾七年。虽说一晃都是快要年…
阅读更多...
【大模型 AI 学习】大模型 AI 部署硬件配置方案（本地硬件配置 | 在线GPU）

【大模型 AI 学习】大模型 AI 部署硬件配置方案（本地硬件配置 | 在线GPU）

最近想部署一个开源深度学习项目&#xff0c;但是小编的笔记本电脑是8G的集成显存&#xff0c;且没有GPU&#xff0c;性能肯定是不够的。于是小编在小po站上粗浅了解了一下当前: 1. 大模型 AI本地硬件配置和 2. 云上申请GPU算力的两种方式。简单记录一下&#xff1a; 参考视频…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023