【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，一经查实，立即删除！

相关文章

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;韩国科学技术…
阅读更多...
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(…
阅读更多...
修复编译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 面向市场为比特币生态带来全新的资产发行方案…
阅读更多...
翻过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…
阅读更多...
jupyter操作LSTM模型，词向量模型理解

jupyter操作LSTM模型，词向量模型理解

1.jupyter没有torch模块&#xff0c;参考下面链接的解决办法 【jupyter notebook安装配置教程&#xff0c;导入pytorch解决No module named torch-哔哩哔哩】 https://b23.tv/jYGvyVR 2.jupyter中没有某一模块怎么办&#xff0c;可以用pycharm打开一个项目&#xff0c;在该项…
阅读更多...
人工智能三剑客NumPy、pandas、matplotlib和Jupyter四者之间的关系

人工智能三剑客NumPy、pandas、matplotlib和Jupyter四者之间的关系

NumPy 主要用途&#xff1a;NumPy&#xff08;Numerical Python的缩写&#xff09;主要用于处理大型多维数组和矩阵的科学计算。它提供了一个高性能的多维数组对象&#xff0c;以及用于数组操作的工具。与其他三者的联系&#xff1a;NumPy是pandas和matplotlib的基础库之一。许…
阅读更多...
网络七层模型之应用层：理解网络通信的架构（七）

网络七层模型之应用层：理解网络通信的架构（七）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
hcia datacom课程学习（3）：http与https、FTP

hcia datacom课程学习（3）：http与https、FTP

1.超文本传输协议&#xff1a;http与https &#xff08;1&#xff09;用来访问www万维网。 wwwhttp&#xff0b;html&#xff0b;URLweb &#xff08;2&#xff09;它们提供了一种发布和接受html界面的方法&#xff1a;当在网页输入URL后&#xff0c;从服务器获取html文件来…
阅读更多...
Java项目基于Docker打包发布

Java项目基于Docker打包发布

一、后端项目 1.打包应用 mvn clean package -DskipTests 2、新建dockerfile文件 #基础镜像 FROM openjdk:8 #工作空间 WORKDIR /opt #复制文件 COPY wms-app-1.0-SNAPSHOT.jar app.jar&#xff08;add也可以&#xff09; #配置容器暴漏的端口 EXPOSE 8080 //不暴露端口使用…
阅读更多...
软件测试|Python random模块，超乎想象的强大

软件测试|Python random模块，超乎想象的强大

Python的random模块是一个非常强大的工具&#xff0c;用于生成随机数和随机选择。它提供了许多函数和方法&#xff0c;可以满足各种随机化需求。本文将介绍random模块的基本功能和常见用法&#xff0c;以帮助读者更好地理解和利用这个模块。 返回整数 random.randange() 语法…
阅读更多...
关于 FastAPI 路径参数，你知道多少？

关于 FastAPI 路径参数，你知道多少？

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023