【Canvas与艺术】淡蓝辉光汽车速度仪表盘

【关键点】

内圈处渐变色的采用。

【效果图】

【代码】

<!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="10px" height="10px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(ctrl+A)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 边长
const LENGTH=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas');  canvas.width=LENGTH;canvas.height=LENGTH;// 初始化canvas的绘图环境ctx=canvas.getContext('2d');  ctx.translate(LENGTH/2,LENGTH/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(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏// 最外层暗蓝圈ctx.beginPath();ctx.arc(0,0,250,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(1,48,83)";ctx.stroke();// 第二层暗黑圈ctx.beginPath();ctx.arc(0,0,248,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(1,14,25)";ctx.stroke();// 第三层暗蓝圈ctx.beginPath();ctx.arc(0,0,248,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="rgb(2,30,65)";ctx.fill();// 第四层亮蓝圈ctx.beginPath();ctx.arc(0,0,246,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(6,94,149)";ctx.stroke();// 渐变色圈var rgnt=ctx.createRadialGradient(0,0,160,0,0,240);         rgnt.addColorStop(0,"rgb(9,114,161)");rgnt.addColorStop(0.2,"rgba(2,32,67,0.5)");ctx.fillStyle=rgnt;ctx.beginPath();ctx.arc(0,0,240,0,2*Math.PI,true);ctx.closePath();ctx.fill();// 细绿圈ctx.beginPath();ctx.arc(0,0,160,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(4,150,141)";ctx.stroke();// 暗蓝底ctx.beginPath();ctx.arc(0,0,158,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="rgb(1,14,44)";ctx.fill();// 粗绿圈ctx.beginPath();ctx.arc(0,0,150,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=6;ctx.strokeStyle="rgb(4,150,141)";ctx.stroke();// 暗蓝断续三圈ctx.beginPath();ctx.arc(0,0,120,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(87,105,204)";ctx.stroke();for(var i=0;i<3;i++){var alpha=Math.PI/6+i*Math.PI*2/3;const r=120;var x=r*Math.cos(alpha);var y=r*Math.sin(alpha);ctx.save();ctx.translate(x,y);ctx.rotate(alpha);            ctx.beginPath();ctx.fillStyle="rgb(1,14,44)";ctx.fillRect(-4,-10,8,20);ctx.closePath();ctx.beginPath();ctx.moveTo(-12,0);ctx.lineTo(6,6);ctx.lineTo(6,-6);ctx.closePath();ctx.fillStyle="white";ctx.fill();ctx.restore();}// 写速度ctx.fillStyle="white";ctx.font="90px Bahnschrift SemiBold Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText("70",0,30);// 写速度单位ctx.fillStyle="white";ctx.font="30px Bahnschrift Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText("km/h",0,80);}// 画前景this.paintFg=function(ctx){    var angle=Math.PI*3/2+Math.random()*Math.PI/100+Math.PI/8;// 画刻度for(var i=0;i<=120;i++){var theta=Math.PI/80*i+Math.PI*3/4;const r=244;var x=r*Math.cos(theta);var y=r*Math.sin(theta);// 刻度ctx.save();ctx.translate(x,y);ctx.rotate(theta);ctx.beginPath();ctx.moveTo(0,0-3);ctx.lineTo(0-6,0-3);ctx.lineTo(0-6,0+3);ctx.lineTo(0,0+3);ctx.closePath();if(theta<angle){ctx.fillStyle="rgb(254,98,54)";ctx.fill();}else{ctx.fillStyle="rgb(187,234,250)";ctx.fill();}ctx.restore();// 文字if(i%20==0){var x3=210*Math.cos(theta);var y3=210*Math.sin(theta);ctx.fillStyle="white";ctx.font="30px Microsoft YaHei UI";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText(i/10,x3,y3+8);}}// 画指针var x1=236*Math.cos(angle);var y1=236*Math.sin(angle);ctx.save();        ctx.translate(x1,y1);ctx.rotate(angle);// 指针上片ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(-18,4);ctx.lineTo(-83,4);ctx.lineTo(-83,0);        ctx.closePath();        ctx.fillStyle="red";ctx.fill();// 指针下片ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(-18,-4);ctx.lineTo(-83,-4);ctx.lineTo(-83,0);        ctx.closePath();        ctx.fillStyle="rgb(245,0,14)";ctx.fill();ctx.restore();}
}/*-------------------------------------
《面试暗语》工资6-10K--就是6K,可能再稍往上加加,但别想多了
抗压能力强--压力很大,准备爬屎山,各种坑要填,各种锅要背
要踏实肯干--工作很累,任务很杂,从编码测试美工到墩地打扫厕所都有,要少点心思,老老实实干活。
回家等通知--大概率没戏了
两周通知你--你非首选
有消息我第一时间通知你,领导在出差还没答复-去面别家吧
我们这边没有那么快,你可以先去看其它机会--别等了,直接去别家
什么时候来上班--大概率稳了,但也有放鸽子的。
-------------------------------------*/
//-->
</script>

【原型】

END

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

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

相关文章

谈谈消息队列

这篇文章我们来聊聊消息队列。我一直在想&#xff0c;能不能用一篇文章就把消息队列的所有内容给串联起来。然后&#xff0c;之后每次看到这篇文章的时候&#xff0c;我就能够立马回忆起来这个大知识的所有知识点。所以我想尝试一下用这种长文的方式&#xff0c;将我自己对于消…

Ubuntu系统设置静态固定IP保姆级教程

1、查看网络接口信息 ifconfig 首先需要确认要设置固定IP的网络接口。在大多数情况下&#xff0c;这通常是ens33 2、查看路由网关信息 route -n # 查看打印 路由表 网关地址 3、备份文件 为了防止防止出现意外问题。Ubuntu中的网络配置文件通常存储在/etc/netplan/目录下&…

微服务概述

微服务 概述1.单体架构2.分布式架构3.微服务的架构特征&#xff1a; 服务拆分和远程调用提供者与消费者 概述 1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 单体架构的优缺点如下&#xff1a; 优点&#xff1a; 架构…

RPA使用Native Messaging 协议实现浏览器自动化

RPA 即机器人流程自动化&#xff0c;是一种利用软件机器人或人工智能来自动化业务流程中规则性、重复性任务的技术。RPA 技术可以模拟和执行人类在计算机上的交互操作&#xff0c;从而实现自动化处理数据、处理交易、触发通知等任务。帮助企业或个人实现业务流程的自动化和优化…

Docker 搭建 Blockbridge

Blockbridge 是一个开源的分布式存储系统&#xff0c;可以通过 Docker 容器化技术进行快速部署。本教程将详细介绍如何使用 Docker CLI 和 Docker Compose 两种方式来搭建 Blockbridge 环境。 前提条件 确保已经安装了 Docker 和 Docker Compose。拥有一个运行中的 Linux 系统…

【Unity人机交互】人工智能之爬虫开章

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

2015年认证杯SPSSPRO杯数学建模B题(第一阶段)替换式密码全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 B题 替换式密码 原题再现&#xff1a; 历史上有许多密码的编制方法。较为简单的是替换式密码&#xff0c;也就是将文中出现的字符一对一地替换成其它的符号。对拼音文字而言&#xff0c;最简单的形式是单字母替换加密&#xff0c;也就是以每个…

精品推荐-史上最全腾讯全套人力资源管理资料合集(附下载)

史上最全腾讯全套人力资源管理资料合集&#xff0c;共六个专题。 知识星球下载地址&#xff1a;https://t.zsxq.com/18YFTROfG 一、腾讯各职位能力模型图 1、腾讯-产品经理能力素质模型图(策划 运用5个岗位).xls 2、腾讯项目经理能力素质模型图.xls 3、腾讯研发人员能力素质模…

金蝶云星空和管易云·奇门单据接口对接

金蝶云星空和管易云奇门单据接口对接 ​​ ​​ 对接源平台:管易云奇门 管易云是上海管易云计算软件有限公司旗下的专注提供电商企业管理软件服务的品牌&#xff0c;总部位于中国上海张江高科技产业园区。管易云旗下拥有管易云C-ERP、EC-OMS、EC-WMS、B2C/B2B/BBC/微商城开发…

速通数据结构第二站 顺序表

文章目录 速通数据结构与算法系列 1 速通数据结构与算法第一站 复杂度 http://t.csdnimg.cn/sxEGF 感谢佬们支持&#xff01; 目录 系列文章目录 前言一、顺序表 0 结构体 1 接口声明 2 初始化和销毁 3 扩容函数 4 打印和判空 5 尾插 …

每日新闻掌握【2024年3月26日 星期二】

2024年3月26日 星期二 农历二月十七 宏观经济 证券时报 湖南、辽宁、西安、重庆四地的地方金融监管部门先后发布公告&#xff0c;表示将取消各自辖内金交所的业务资质。据悉&#xff0c;接下来还会有更多地方陆续发布该公告。这意味着&#xff0c;在诸多金融风险事件中频繁现…

基于51单片机的拔河游戏Proteus仿真

地址&#xff1a;https://pan.baidu.com/s/18LMEo-_WYcoyTOkWYJ0NUg 提取码&#xff1a;1234 仿真图&#xff1a; 1&#xff09;设计一个能进行拔河游戏的电路&#xff0c;通过按键控制游戏开始和复位。 2&#xff09;电路使用9个发光二极管排成一行&#xff0c;中间的LED为拔…

Linux C++ 004-流程控制语句

Linux C 004-流程控制语句 本节关键字&#xff1a;Linux、C、流程控制语句 相关库函数&#xff1a; C/C支持最基本的三中程序运行结构&#xff1a;顺序结构、选择结构、循环结构 类型作用顺序结构程序按顺序执行&#xff0c;不发生跳转选择结构依据条件是否满足&#xff0c;有…

ElasticSearch之数据建模

写在前面 本文看下es数据建模相关的内容。 1&#xff1a;什么是数据建模 数据建模是对真实数据的一种抽象&#xff0c;最终映射为计算机形式的表现。其包括如下三个阶段&#xff1a; 1&#xff1a;概念模型 2&#xff1a;逻辑模型 3&#xff1a;数据模型2&#xff1a;es数据…

python爬虫基础-----运算符(第三天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

【go从入门到精通】for和for range的区别

作者简介&#xff1a; 高科&#xff0c;先后在 IBM PlatformComputing从事网格计算&#xff0c;淘米网&#xff0c;网易从事游戏服务器开发&#xff0c;拥有丰富的C&#xff0c;go等语言开发经验&#xff0c;mysql&#xff0c;mongo&#xff0c;redis等数据库&#xff0c;设计模…

纹理压缩算法

一、什么是纹理压缩 我们知道游戏中对于3D物体表面细节的表现最重要的还是靠贴图来实现的&#xff0c;那么越是高分辨率越是真彩色的贴图自然表现力也是越强&#xff0c;但是同时带来的问题是所需占用的内存会成倍的上升&#xff0c;而节省内存这一点在目前的游戏中还是非常非…

实时通讯技术实现

实时通讯技术实现 前言 在CS架构中&#xff0c;经常会有实时通信的需求。客户端和服务端建立连接&#xff0c;服务端实时推送数据给客户端。本文介绍几种常见的实现方式&#xff0c;希望能给读者们一点点参考。 实时通讯的主要实现技术 长轮询(Long Polling) WebSocket 服务器发…

牛客周赛 Round 38(A,B,C,D,E,F,G)

比赛链接 官方讲解&#xff08;不分P不分段直接两小时怼上来是坏文明 &#xff09; 这场的题很棒&#xff0c;思维有难度&#xff0c;考察的知识点广泛&#xff0c;有深度&#xff0c;很透彻。感觉学到了很多。建议补题。 A 小红的正整数自增 思路&#xff1a; 签到。 可以…

Qt QTableView模拟表格点击事件

Qt QTableView模拟表格点击事件 如题&#xff0c;QTableView 的表格有时候需要通过代码进行模拟点击 指定单元格&#xff0c;笔者网络上没找到答案&#xff0c;故分享出来。 笔者在tableView中使用了委托控件QComboBox&#xff0c;用鼠标单击能正常使用&#xff0c;有需求需要…