【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="512px" height="512px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 边长
const LENGTH=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas');  // 初始化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.stroke(); ctx.clip();var gnt=ctx.createLinearGradient(-LENGTH/2,-LENGTH/2,-LENGTH/2,LENGTH/2);gnt.addColorStop(0,"rgb(1,3,1)");gnt.addColorStop(1,"rgb(1,53,5)");ctx.fillStyle=gnt;ctx.fillRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 绿圈ctx.strokeStyle="rgb(49,203,107)";ctx.lineWidth=6;ctx.beginPath();ctx.arc(0,0,240,0,2*Math.PI,true);ctx.closePath();ctx.stroke();//for(var i=0;i<=120;i++){// 画小圆点var theta=Math.PI/80*i+Math.PI*3/4;var x=230*Math.cos(theta);var y=230*Math.sin(theta);ctx.fillStyle="rgb(49,203,107)";ctx.beginPath();ctx.arc(x,y,3,0,2*Math.PI,true);ctx.closePath();ctx.fill();if((i % 10)==0){// 画刻度var x1=240*Math.cos(theta);var y1=240*Math.sin(theta);if((i % 20)==0){var x4=215*Math.cos(theta);var y4=215*Math.sin(theta);ctx.lineWidth=8;ctx.strokeStyle="rgb(49,203,107)";ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x4,y4);ctx.closePath();ctx.stroke();}else{var x2=220*Math.cos(theta);var y2=220*Math.sin(theta);ctx.lineWidth=6;ctx.strokeStyle="rgb(49,203,107)";ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();}// 写数字var x3=190*Math.cos(theta);var y3=190*Math.sin(theta);ctx.fillStyle="rgb(49,203,107)";ctx.font="30px Bahnschrift Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText(i,x3,y3+8);}}// 绿圈ctx.strokeStyle="rgb(49,203,107)";ctx.lineWidth=2;ctx.beginPath();ctx.arc(0,0,80,0,2*Math.PI,true);ctx.closePath();ctx.stroke();// 绿圈ctx.strokeStyle="rgb(49,203,107)";ctx.lineWidth=6;ctx.beginPath();ctx.arc(0,0,60,0,2*Math.PI,true);ctx.closePath();ctx.stroke();ctx.fillStyle="rgb(49,203,107)";ctx.font="30px Bahnschrift Condensed";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillText("km/h",0,-100);}// 画前景this.paintFg=function(ctx){var angle=Math.PI*7/4+Math.random()*Math.PI/120;;// ctx.save();ctx.lineWidth=0.5; ctx.fillStyle = "red";ctx.beginPath();ctx.rotate(angle);ctx.moveTo(200,0);ctx.lineTo(-120,-6);ctx.lineTo(-120,6);ctx.closePath();ctx.fill();ctx.restore();ctx.save();ctx.lineWidth=1; ctx.fillStyle = "yellow";ctx.beginPath();ctx.rotate(angle);ctx.moveTo(200,0);ctx.lineTo(-20,-1);ctx.lineTo(-110,0);ctx.lineTo(-20,1);ctx.closePath();ctx.fill();ctx.restore();}
}
//-->
</script>

END

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

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

相关文章

基于Arduino IDE 野火ESP8266模块 MODBUS RTU开发

一、工程创建 1.新建工程&#xff0c;工程另存为modbusRtu。 2.官网搜索modbus 相关库 https://www.arduino.cc/reference/en/libraries/或者在Arduino IDE中库管理中搜索选择modbus库 安装完如下 选择更多信息&#xff0c;会跳到库的代码示例&#xff0c;可查看如何使用该…

python框架的一加剧场管理系统的设计与实现flask-django-nodejs-php

本文讲述了一加剧场管理系统。结合电子管理系统的特点&#xff0c;分析了一加剧场管理系统的背景&#xff0c;给出了一加剧场管理系统实现的设计方案。 本论文主要完成不同用户的权限划分&#xff0c;不同用户具有不同权限的操作功能&#xff0c;在用户模块&#xff0c;主要有用…

数学建模常用代码

Topsis算法基本思想&#xff1a; 基于归一化后的原始数据矩阵&#xff0c;采用余弦法找出有限方案中的最优方案和最劣方案&#xff08;分别用最优向量和最劣向量表示&#xff09;&#xff0c; 然后分别计算各评价对象与最优方案和最劣方案间的距离&#xff0c;获得各评价对象与…

Git多分支管理实践

想要实现本地文件对远程文件的管理&#xff0c;必须懂得Git的相关操作。 工作中不免会遇到一个仓库多个分支的管理。 git多分支管理属于git的进阶版操作&#xff0c;下面我们来看看。 1. 拉取一个git仓库 git仓库名假设为&#xff1a;test_demo&#xff0c;默认是主仓库&…

搞了半天blender整动画这么爽,骨骼重定向一回,动作就可以到处套用,和音频对轨也好使

我们搞到了运动数据&#xff08;可能是bvh文件&#xff0c;也可能是fbx文件&#xff09;之后&#xff0c;想要让某个静态的模型动起来。 我们假定用的是Tpose的模型&#xff08;因为我这个bvh文件是Tpose用的&#xff0c;所以为了动作映射不出问题&#xff0c;优先整的这种模型…

C++开发基础——函数对象与std::function模板

一&#xff0c;函数对象 1.函数对象的概念 函数对象可以像函数那样被直接调用。 函数对象(function objects)又被称为仿函数(functors)。 函数对象可以被当作一个值赋给另一个变量&#xff0c;也可以作为实参传递给其他函数&#xff0c;或者作为其他函数的返回结果。 函数…

1.1-数组-704. 二分查找★

704. 二分查找 ★ 力扣题目链接&#xff0c;给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;搜索 nums 中的 target&#xff0c;如果存在返回下标&#xff0c;否则返回 -1。n 将在 [1, 10000]之间。 可以假设 nums 中的所…

WM8978 —— 带扬声器驱动程序的立体声编解码器(5)

接前一篇文章&#xff1a;WM8978 —— 带扬声器驱动程序的立体声编解码器&#xff08;4&#xff09; 九、寄存器概览与详解 1. 整体概览 WM8978芯片共有58个寄存器&#xff0c;整体总表如下&#xff1a; 2. 详细说明 在此&#xff0c;只介绍WM8978较为常用的那些寄存器。 &…

C++初阶:string类相关练习题

目录 1. 字符串相加2. 反转字母3. 字符串中唯一字母4. 字符串中最后一个单词5. 验证回文串6. 反转字符II7. 反转字符串中的单词8. 字符串相乘 1. 字符串相加 题目信息&#xff1a; 题目连接&#xff1a; 字符串相加 class Solution { public:string addStrings(string num1, s…

公司管理-技术VS市场

技术型公司往往会出现这样的场景&#xff1a;市场人员抱怨产品差不好卖&#xff1b;技术人员不给力&#xff0c;项目总验收不了。技术人员抱怨市场人员只管签单&#xff0c;什么都敢答应。这就是矛盾&#xff0c;应该应用矛盾论来解决问题。 产品的发展需要时间、人力的不断投入…

2024龙年新版UI周易测算网站H5源码

支持对接第三方支付 安装方法以linux为例: 1、建议在服务器上面安装宝塔面板,以便操作,高逼格技术员可以忽略这步操作。 2、把安装包文件解压到根目录,同时建立数据库,把数据文件导入数据库 3、修改核心文件config/inc_config.php把数据库信息替换成你的 4、解析域名…

【C语言基础篇】内存处理函数(三)memset的介绍及模拟实现

个人主页&#xff1a; 倔强的石头的博客 系列专栏 &#xff1a;C语言指南 C语言刷题系列 待补充完善

Java 学习和实践笔记(44):数组的声明定义和使用以及初始化

示例代码&#xff1a; public class TestArray {public static void main(String[] args) {/*测试整数型一维数组*/int[] s;//声明s是一个整数数组类型s new int[10];//将s实例化&#xff0c;也就是分配内存空间&#xff0c;真正创建了这个对象//int[] s new int[10];也可以…

如何设计一个可扩展的Web应用架构?

如何设计一个可扩展的Web应用架构&#xff1f; 设计一个可扩展的Web应用架构是一个复杂而重要的任务&#xff0c;需要综合考虑多个方面&#xff0c;包括技术选型、系统架构、性能优化等。以下是一些关键步骤和策略&#xff0c;可以帮助您设计一个可扩展的Web应用架构&#xff…

Meta 推出SceneScript,一种全新的3D场景重建方式

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【洛谷 P8709】[蓝桥杯 2020 省 A1] 超级胶水 题解(贪心算法+优先队列+哈夫曼树)

[蓝桥杯 2020 省 A1] 超级胶水 题目描述 小明有 n n n 颗石子&#xff0c;按顺序摆成一排&#xff0c;他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量&#xff0c;如果将两颗石子粘在一起&#xff0c;将合并成一颗新的石子&#xff0c;重量是这两颗石子的重量之和…

Zabbix与Prometheus区别简述

Zabbix与Prometheus区别简述 历史沿革 一、监控工具简介 1、Zabbix https://www.zabbix.com/cn/download Zabbix是传统的监控系统&#xff0c;出现比云原生早&#xff0c;使用的是SQL关系型数据库&#xff1b;开源监控软件&#xff0c;遵守 GPLv2开源协议&#xff0c;起源于…

高架学习笔记之系统分析与设计

目录 一、结构化方法&#xff08;SASD&#xff09; 1.1. 结构化分析方法&#xff08;SA&#xff09; 1.1.1. 数据流图&#xff08;DFD&#xff09; 1.1.2. 实体联系图&#xff08;E-R图&#xff09; 1.1.3. 状态转换图(STD) 1.1.4. 数据字典 1.2. 结构化设计方法&#x…

【wpf应用8】如何让WPF Grid控件根据屏幕尺寸自动调整

简介&#xff1a; 在Windows Presentation Foundation&#xff08;WPF&#xff09;中&#xff0c;Grid控件是一个强大的布局工具&#xff0c;它允许开发者创建复杂且响应迅速的用户界面。在不同的设备和屏幕尺寸上保持良好的布局一致性是一个挑战。本文将介绍如何让Grid控件根据…

Prometheus Grafana 配置仪表板

#grafana# 其实grafana提供了丰富的Prometheus数据源的仪表板&#xff0c;基本上主流的都有&#xff0c;通过下面官方地址可查阅 Dashboards | Grafana Labs 这里举例说明&#xff0c;配置node_exporter仪表板 首先&#xff0c;在上面的网站搜索 node 可以查到蛮多的仪表板…