【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.rhkb.cn/news/285272.html

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

相关文章

php搭建websocket

php搭建websocket

1.项目终端执行命令&#xff1a;composer require topthink/think-worker 2.0.x 2.config多出三个配置文件&#xff1a; 3.当使用php think worker:gateway命令时&#xff0c;提示不支持Windows。 4.打包项目为zip格式 5.打包数据库 6.阿里云创建记录 7.宝塔面板新增站点…
阅读更多...
win10如何录制视频？解锁屏幕录制新姿势！

win10如何录制视频？解锁屏幕录制新姿势！

在Windows 10操作系统中&#xff0c;视频录制已经成为一项非常实用的功能。无论是进行在线教育、游戏直播&#xff0c;还是制作教学视频、会议记录&#xff0c;一款易于使用且功能强大的录屏软件都是必不可少的。在本文中&#xff0c;我们将向您介绍win10如何录制视频的三种方法…
阅读更多...
一枝独秀，基于区块链共益型短视频平台享视，真的能抗衡各大短视频平台吗

一枝独秀，基于区块链共益型短视频平台享视，真的能抗衡各大短视频平台吗

早在2006年&#xff0c;全球非营利性组织共益实验室(B Lab)就提出了共益企业(B Corp)的概念&#xff0c;致力于推动商业向善。 但时至今日&#xff0c;共益企业发展仍处初级阶段&#xff0c;而且只强调要对社区、员工、环境、供应商、消费者等利益相关者负责&#xff0c;认定标…
阅读更多...
【协议-HTTPS】

【协议-HTTPS】

https https是在http协议的基础上&#xff0c;添加了SSL/TLS握手以及数据加密传输&#xff0c;也属于应用层协议。 httpshttp加密认证完整性保护 https交互图&#xff1a; HTTPS的整体过程分为证书验证和数据传输阶段&#xff1a; ① 证书验证阶段 浏览器发起 HTTPS 请求 服务…
阅读更多...
电脑不能读取移动硬盘，但是可以读取U盘解决方法

电脑不能读取移动硬盘，但是可以读取U盘解决方法

找到此电脑 右键设备管理器&#xff0c;找到其中的通用串行总线控制器。 注意&#xff0c;凡是插入到电脑当中不能读取的U盘或者移动硬盘&#xff0c;都会在通用串行总线控制器当中显示为USB大容量存储设备 鼠标选中“USB大容量存储设备”&#xff0c;右键卸载它。此时&#x…
阅读更多...
【算法每日一练]-动态规划（保姆级教程 篇17 状态压缩）#POJ1185：炮兵阵地 #互不侵犯

【算法每日一练]-动态规划（保姆级教程 篇17 状态压缩）#POJ1185：炮兵阵地 #互不侵犯

目录 今日知识点&#xff1a; 把状态压缩成j,dp每行i的布置状态&#xff0c;从i-1和i-2行进行不断转移 把状态压缩成j,dp每行i的布置状态&#xff0c;从i-1行进行状态匹配&#xff0c;然后枚举国王数转移 POJ1185&#xff1a;炮兵阵地 思路&#xff1a; 题目&#xff1a;互…
阅读更多...
Verilog刷题笔记44

Verilog刷题笔记44

题目&#xff1a;Consider the n-bit shift register circuit shown below: 解题&#xff1a; module top_module (input clk,input w, R, E, L,output Q );always(posedge clk)beginif(L1)Q<R;elseQ<(E1)?w:Q;endendmodule结果正确&#xff1a; 注意点&#xff1a; …
阅读更多...
吴恩达2022机器学习专项课程(一） 3.6 可视化样例

吴恩达2022机器学习专项课程(一） 3.6 可视化样例

问题预览 1.本节课主要讲的是什么&#xff1f; 2.不同的w和b&#xff0c;如何影响线性回归和等高线图&#xff1f; 3.一般用哪种方式&#xff0c;可以找到最佳的w和b&#xff1f; 解读 1.课程内容 设置不同的w和b&#xff0c;观察模型拟合数据&#xff0c;成本函数J的等高线…
阅读更多...
安卓studio连接手机之后，一两秒之后就自动断开了。问题解决。

安卓studio连接手机之后，一两秒之后就自动断开了。问题解决。

太坑了&#xff0c;安卓studio链接手机之后。几秒之后就断开了。我以为是adb的问题&#xff0c;就重新安装了一下adb。并且在环境变量中配置了Path的路径。然而并没有什么用啊。 经过排查原来是数据心虚了。线的接触不良。导致你刚接通的瞬间有相对较强的电流是因为有瞬间高电压…
阅读更多...
【ArcGIS微课1000例】0106：ArcGIS制作风向频率(风速)玫瑰图

【ArcGIS微课1000例】0106：ArcGIS制作风向频率(风速)玫瑰图

文章目录 一、效果预览二、加载数据三、创建图表四、图表修饰五、保存图片一、效果预览 在ArcGIS制作的风向频率玫瑰图最终效果如下所示： 二、加载数据 加载配套实验数据包中0106.rar中的excel数据，然后右键→打开。 三、创建图表 1. 创建图表。右击打开属性表，选择表选项…
阅读更多...
Mac电脑高清媒体播放器:Movist Pro for mac下载

Mac电脑高清媒体播放器:Movist Pro for mac下载

Movist Pro for mac是一款专为Mac操作系统设计的高清媒体播放器&#xff0c;支持多种常见的媒体格式&#xff0c;包括MKV、AVI、MP4等&#xff0c;能够流畅播放高清视频和音频文件。Movist Pro具有强大的解码能力和优化的渲染引擎&#xff0c;让您享受到更清晰、更流畅的观影体…
阅读更多...
蓝桥杯第十五届抱佛脚（二）竞赛中的数据结构

蓝桥杯第十五届抱佛脚（二）竞赛中的数据结构

蓝桥杯第十五届抱佛脚&#xff08;二&#xff09;内置数据结构 文章目录 蓝桥杯第十五届抱佛脚&#xff08;二&#xff09;内置数据结构在竞赛中常见的数据结构数组(Array)链表(Linked List)栈(Stack)队列(Queue)树(Tree)映射(Map) 内置数据结构的快速使用迭代器&#xff08;It…
阅读更多...
(一)基于IDEA的JAVA基础7

(一)基于IDEA的JAVA基础7

关系运算符 运算符 含义 范例 结果 等于 12 false &#xff01; 不等于 1&#xff01;2 true > 大于 1>2 false < 小于 …
阅读更多...
谈谈我对 AIGC 趋势下软件工程重塑的理解

谈谈我对 AIGC 趋势下软件工程重塑的理解

作者&#xff1a;陈鑫 今天给大家带来的话题是 AIGC 趋势下的软件工程重塑。今天这个话题主要分为以下四大部分。 第一部分是 AI 是否已经成为软件研发的必选项&#xff1b;第二部分是 AI 对于软件研发的挑战及智能化机会&#xff0c;第三部分是企业落地软件研发智能化的策略…
阅读更多...
Android 项目新建问题总结

Android 项目新建问题总结

title: Android 项目新建问题总结 search: 2024-03-24 tags: “#Android 项目新建问题总结” Android 项目新建问题总结 一、gradle 项目每次都自动下载依赖包到C盘 背景&#xff1a;idea 首次打开一个 gradle 项目&#xff0c;都会在 C 盘下载项目所需的依赖包&#xff0c;但…
阅读更多...
解读 Xend Finance：向 RWA 叙事拓展，构建更具包容性的 DeFi 体系

解读 Xend Finance：向 RWA 叙事拓展，构建更具包容性的 DeFi 体系

在二十世纪后&#xff0c;非洲地区陆续爆发了主权运动&#xff0c;这也让非洲大陆逐渐摆脱“殖民地”的标签。目前&#xff0c;非洲大陆公有 54 个主权国家&#xff0c;接近 15 亿且仍在飙升的人口规模&#xff0c;其 GDP 已经与印度相当&#xff0c;且仍旧处于飞速的发展进程中…
阅读更多...
微服务（基础篇-002-Ribbon）

微服务（基础篇-002-Ribbon）

目录 Ribbon负载均衡&#xff08;1&#xff09; 负载均衡的原理&#xff08;1.1&#xff09; 负载均衡策略&#xff08;1.2&#xff09; Ribbon-IRule(1.2.1) 修改负载均衡的方法&#xff08;1.2.2&#xff09; 懒加载&#xff08;1.3&#xff09; 饥饿加载&#xff08;1…
阅读更多...
如何打破SAST代码审计工具的局限性？

如何打破SAST代码审计工具的局限性？

关键词&#xff1a;白盒测试&#xff1b;代码分析工具&#xff1b;代码扫描工具&#xff1b;静态代码检测工具&#xff1b; 在代码的世界里&#xff0c;安全问题如同潜伏的暗礁&#xff0c;随时可能让航行中的软件项目触礁沉没。SAST代码审计工具如同雷达一样&#xff0c;以其独…
阅读更多...
在fstab文件中配置UUID方式自动挂载数据盘、swap、目录（**）

在fstab文件中配置UUID方式自动挂载数据盘、swap、目录（**）

linux如何挂在硬盘&#xff0c;自动挂载和手动挂载&#xff08;详细说明&#xff09;https://gitcode.csdn.net/65eedcea1a836825ed7a06f4.html 解决linux重启后磁盘挂载失效的问题 https://blog.csdn.net/sugarbliss/article/details/107033034 linux /etc/fstab 文件详细说…
阅读更多...
我的风采——android studio

我的风采——android studio

目录 实现“我的风采”页面要求理论代码生成apk文件 实现“我的风采”页面 要求 要求利用’java框架的边框布局实现“找的风采 ”页而&#xff0c;其中中间为你的生活照&#xff0c;左右和下面为按钮&#xff0c;上面为标签 理论 Java GUI编程是Java程序设计的重要组成部分…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发