【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,2*Math.PI,true);ctx.closePath();ctx.fillStyle="rgb(0,0,7)";ctx.fill();// 灰蓝外圈ctx.strokeStyle="rgb(67,113,220)";ctx.lineWidth=2;ctx.beginPath();ctx.arc(0,0,250,0,2*Math.PI,true);ctx.closePath();ctx.stroke();// 用上面的圆去剪切下面的图形ctx.clip();// 背景网格for(var i=0;i<105;i++){const step=18;ctx.beginPath();ctx.moveTo(-LENGTH/2,-LENGTH/2+i*step);ctx.lineTo(-LENGTH/2+i*step,-LENGTH/2);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgba(35,91,178,0.3)";ctx.stroke();ctx.beginPath();ctx.moveTo(LENGTH/2-i*step,-LENGTH/2);ctx.lineTo(LENGTH/2,-LENGTH/2+i*step);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgba(35,91,178,0.3)";ctx.stroke();}// 画辐射状半透明蒙版var rgnt=ctx.createRadialGradient(0,0,240,0,0,250);        rgnt.addColorStop(0,"rgba(35,91,178,0.3)");rgnt.addColorStop(1,"rgba(255,255,255,1)");ctx.fillStyle=rgnt;ctx.beginPath();ctx.arc(0,0,250,0,2*Math.PI,true);ctx.closePath();ctx.fill();// 右四分之一圆ctx.beginPath();ctx.arc(0,0,245,-Math.PI/4,Math.PI/4,false);ctx.lineWidth=10;ctx.strokeStyle="rgb(173,205,243)";ctx.stroke();// 左四分之一圆ctx.beginPath();ctx.arc(0,0,245,Math.PI*3/4,Math.PI*5/4,false);ctx.lineWidth=10;ctx.strokeStyle="rgb(173,205,243)";ctx.stroke();// 红圈ctx.beginPath();ctx.arc(0,0,230,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=4;ctx.strokeStyle="rgb(252,66,28)";ctx.stroke();// 蓝白圈ctx.beginPath();ctx.arc(0,0,220,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(98,168,255)";ctx.stroke();// 内部光弧var rgnt=ctx.createRadialGradient(0,0,210,0,0,220);        rgnt.addColorStop(0,"rgba(98,168,255,0.1)");rgnt.addColorStop(1,"rgba(255,255,255,1)");ctx.fillStyle=rgnt;ctx.beginPath();ctx.arc(0,0,220,0,2*Math.PI,true);ctx.closePath();ctx.fill();// 缺口蓝白圈ctx.beginPath();ctx.arc(0,0,160,Math.PI*3/4,Math.PI/4,false);ctx.lineWidth=2;ctx.strokeStyle="rgb(190,216,241)";ctx.stroke();// 画刻度for(var i=0;i<=120;i++){var theta=Math.PI/80*i+Math.PI*3/4;var x=140*Math.cos(theta);var y=140*Math.sin(theta);if((i % 2)==0){// 画刻度var x1=160*Math.cos(theta);var y1=160*Math.sin(theta);if((i % 10)==0){var x4=134*Math.cos(theta);var y4=134*Math.sin(theta);ctx.lineWidth=6;ctx.strokeStyle="rgb(190,216,241)";ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x4,y4);ctx.closePath();ctx.stroke();// 写数字var x3=180*Math.cos(theta);var y3=180*Math.sin(theta);ctx.fillStyle="white";ctx.font="20px Bahnschrift Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText(i*2,x3,y3+8);}else{var x2=140*Math.cos(theta);var y2=140*Math.sin(theta);ctx.lineWidth=2;ctx.strokeStyle="rgb(190,216,241)";ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();}               }}}// 画前景this.paintFg=function(ctx){    var angle=Math.PI*11/6+Math.random()*Math.PI/120;// ctx.save();ctx.lineWidth=0.5; ctx.fillStyle = "rgb(250,53,21)";ctx.beginPath();ctx.rotate(angle);ctx.moveTo(200,0);ctx.lineTo(-50,0);ctx.lineTo(-40,5);ctx.lineTo(190,2);ctx.closePath();ctx.fill();ctx.restore();ctx.save();ctx.lineWidth=0.5; ctx.fillStyle = "red";ctx.beginPath();ctx.rotate(angle);ctx.moveTo(200,0);ctx.lineTo(-50,0);ctx.lineTo(-40,-5);ctx.lineTo(190,-2);ctx.closePath();ctx.fill();ctx.restore();// 外圈var gnt=ctx.createLinearGradient(0,0,0,80);    gnt.addColorStop(0,"navy");gnt.addColorStop(0.3,"rgb(6,22,45)");gnt.addColorStop(1,"black");ctx.beginPath();ctx.arc(0,0,40,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle=gnt;ctx.fill();// 内圈var gnt=ctx.createLinearGradient(0,0,0,60);gnt.addColorStop(0,"rgb(6,22,45)");gnt.addColorStop(0.5,"navy");gnt.addColorStop(1,"blue");ctx.beginPath();ctx.arc(0,0,30,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle=gnt;        ctx.fill();ctx.fillStyle="rgb(39,172,231)";ctx.font="30px Bahnschrift Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText("173.2 km/h",0,150);}
}/*-------------------------------------
人是气死的，花是浇死的。
凡是大病，必与情志有关，长期情志不遂，
必会滋生大病。
养生并不是一味地讲究吃什么喝什么，
养生养的其实是人生格局，人生情怀。
-------------------------------------*/
//-->
</script>

END

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

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

相关文章

Java全栈课程之Linux———目录相关命令

Java全栈课程之Linux———目录相关命令

一、绝对路径和相对路径 我们知道Linux的目录结构为树状结构&#xff0c;最顶级的目录为根目录 /。 其他目录通过挂载可以将它们添加到树中&#xff0c;通过解除挂载可以移除它们。 在开始本教程前我们需要先知道什么是绝对路径与相对路径。 绝对路径&#xff1a; 路径的写…
阅读更多...
2015年认证杯SPSSPRO杯数学建模C题(第二阶段)荒漠区动植物关系的研究全过程文档及程序

2015年认证杯SPSSPRO杯数学建模C题(第二阶段)荒漠区动植物关系的研究全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 C题 荒漠区动植物关系的研究 原题再现&#xff1a; 环境与发展是当今世界所普遍关注的重大问题, 随着全球与区域经济的迅猛发展, 人类也正以前所未有的规模和强度影响着环境、改变着环境, 使全球的生命支持系统受到了严重创伤, 出现了全球变暖…
阅读更多...
R语言基础入门

R语言基础入门

1.保存或加载工作空间 改变工作目录——进行文件读写&#xff0c;默认去指定文件进行操作。&#xff08;使用R时&#xff0c;最好先设定工作目录&#xff08;setwd(),getwd()&#xff09;&#xff09; setwd(“工作文件路径”)&#xff1a;建立工作目录 getwd&#xff08;&…
阅读更多...
【STM32嵌入式系统设计与开发】——9Timer(定时器中断实验)

【STM32嵌入式系统设计与开发】——9Timer(定时器中断实验)

这里写目录标题 一、任务描述二、任务实施1、ActiveBeep工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#xff08;2&#xff09;USART1初始化函数(usart1_init())&#xff08;3&#xff09;USART数据发送函数&#xff08; USART1_Send_Data&#xff08;&…
阅读更多...
【论文阅读】Probabilistic Imputation for Time-series Classification with Missing Data

【论文阅读】Probabilistic Imputation for Time-series Classification with Missing Data

Probabilistic Imputation for Time-series Classification with Missing Data 论文链接&#xff1a;https://icml.cc/virtual/2023/poster/23522 作者&#xff1a;SeungHyun Kim Hyunsu Kim EungGu Yun Hwangrae Lee Jaehun Lee Juho Lee 机构&#xff1a;韩国科学技术…
阅读更多...
突破编程_C++_面试（STL 编程 priority_queue）

突破编程_C++_面试（STL 编程 priority_queue）

1 请解释 priority_queue 在 STL 中的作用&#xff0c;并说明它与队列&#xff08;queue&#xff09;的主要区别是什么&#xff1f; priority_queue 在 STL 中的作用 priority_queue 是 STL&#xff08;Standard Template Library&#xff09;中的一个容器适配器&#xff0c;…
阅读更多...
什么情况下 C++ 需要垃圾处理机制？

什么情况下 C++ 需要垃圾处理机制？

C&#xff0c;作为一种以性能和灵活性著称的编程语言&#xff0c;历来以其严谨的手动内存管理而闻名。然而&#xff0c;尽管C提供了丰富的工具如RAII&#xff08;Resource Acquisition Is Initialization&#xff09;原则、智能指针等来协助开发者有效地管理内存&#xff0c;但…
阅读更多...
学会在 C++ 中使用变量：从定义到实践

学会在 C++ 中使用变量：从定义到实践

C 变量 变量是用于存储数据值的容器。 在 C 中&#xff0c;有不同类型的变量&#xff08;使用不同的关键字定义&#xff09;&#xff0c;例如&#xff1a; int - 存储整数&#xff08;没有小数点&#xff09;&#xff0c;例如 123 或 -123double - 存储浮点数&#xff0c;带…
阅读更多...
Python 命名规则

Python 命名规则

变量名 使用小写字母和下划线组合&#xff0c;例如&#xff1a;my_variable。 变量名应具有描述性&#xff0c;以便易于理解变量的用途。 函数名 使用小写字母和下划线组合&#xff0c;例如&#xff1a;my_function。 函数名应具有描述性&#xff0c;以便易于理解函数的功…
阅读更多...
Qt登录页面

Qt登录页面

#include "mywidget.h" #include "ui_mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget) {ui->setupUi(this);//接收动图QMovie *mv new QMovie(":/pictrue/luori.gif");ui->loglab->setMovie(…
阅读更多...
2024蓝桥杯省赛保奖突击班-Day1-二分查找_笔记_练习题解

2024蓝桥杯省赛保奖突击班-Day1-二分查找_笔记_练习题解

3月22日-课堂笔记 非降序序列二分查找等于 x x x 的数下标 int find(int x, int l, int r) {while(l < r) {int mid (l r) / 2;if(x < a[mid]) r mid;else l mid 1;}return l; }非降序可重序列下标最小 ≥ x \geq x ≥x 的元素 int find(int x, int l, int r) …
阅读更多...
修复编译RK3568-buildroot时提示不能使用root权限编译的问题

修复编译RK3568-buildroot时提示不能使用root权限编译的问题

问题 使用 rk3568 的 sdk 中的 buildroot 来编译根文件系统的时候&#xff0c;出现 "you should not run configure as root (set FORCE_UNSAFE_CONFIGURE1 in environment&#xff09;" 的错误。 解决方法 根据错误提示&#xff0c;我们将 set FORCE_UNSAFE_CON…
阅读更多...
算法打卡day16

算法打卡day16

今日任务&#xff1a; 1&#xff09;513.找树左下角的值 2&#xff09;112.路径总和 3&#xff09;113.路径总和Ⅱ 4&#xff09;106.从中序与后序遍历序列构造二叉树 5&#xff09;105.从前序与中序遍历序列构造二叉 513.找树左下角的值 题目链接&#xff1a;513. 找树左下角…
阅读更多...
如何在软件测试行业走的更远？

如何在软件测试行业走的更远？

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 时间往前推10年&#xff0c;IT业如日中天。 其中测试更是一个极具包容性的行业。那些希望在技术…
阅读更多...
【云开发笔记No.9】Kanban与敏捷开发

【云开发笔记No.9】Kanban与敏捷开发

Kanban看板起源于丰田。 看板&#xff08;Kanban&#xff09;一词来自日文&#xff0c;本义是可视化卡片。如下图所示&#xff0c;看板工具的实质是&#xff1a;后道工序在需要时&#xff0c;通过看板向前道工序发出信号——请给我需要数量的输入&#xff0c;前道工序只有得到看…
阅读更多...
Orangedx：引领新一轮 BTCFi 浪潮

Orangedx：引领新一轮 BTCFi 浪潮

“OrangeDx 作为新一轮 BTCFi 浪潮引领者被市场寄予厚望 &#xff0c;前不久在 FinceptorApp 的平台的公开销售 20 万美元的额度仅在几秒售罄&#xff0c;而其即将以 Startup 方式登陆 Gate 平台也同样备受市场期待。” 自 Ordinals 面向市场为比特币生态带来全新的资产发行方案…
阅读更多...
洛谷刷题 | B3621 枚举元组

洛谷刷题 | B3621 枚举元组

枚举元组 题目描述 n n n 元组是指由 n n n 个元素组成的序列。例如 ( 1 , 1 , 2 ) (1,1,2) (1,1,2) 是一个三元组、 ( 233 , 254 , 277 , 123 ) (233,254,277,123) (233,254,277,123) 是一个四元组。 给定 n n n 和 k k k&#xff0c;请按字典序输出全体 n n n 元组&am…
阅读更多...
翻过DP这座大山

翻过DP这座大山

1.AcWing 跳台阶 第一种方法:暴力搜索DFS #include <iostream> using namespace std;int dfs(int n) {if(n 1) return 1;else if(n 2) return 2;else return dfs(n-1)dfs(n-2); }int main() {int x; cin>>x;cout<<dfs(x)<<endl;return 0; }显然如…
阅读更多...
银河麒麟系统安装设备类型选择lvm简单模式之后，数据写入导致失败导致系统重启无法正常加载

银河麒麟系统安装设备类型选择lvm简单模式之后，数据写入导致失败导致系统重启无法正常加载

银河麒麟系统安装设备类型选择lvm简单模式之后&#xff0c;数据写入导致失败导致系统重启无法正常加载 一 系统环境1.1 系统版本信息1.2 通过镜像安装的过程中选择设备类型选择的是lvm简单模式 二 问题描述三 问题修复过程3.1 挂载ISO镜像&#xff0c;引导到字符终端界面3.2 修…
阅读更多...
茶饮品牌抖音账号规划流量运营策划方案

茶饮品牌抖音账号规划流量运营策划方案

【干货资料持续更新&#xff0c;以防走丢】 茶饮品牌抖音账号规划流量运营策划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 抖音运营资料合集&#xff08;完整资料包含以下内容&#xff09; 目录 冷启动期 1. 直播前期准备 - 进行DOUA/B测试&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023