【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.mfbz.cn/a/484778.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算联合体union的大小

计算联合体union的大小

一&#xff1a;联合类型的定义 联合也是一种特殊的自定义类型&#xff0c;这种类型定义的变量也包含一系列的成员&#xff0c;特征是这些成员公用同一块空间&#xff08;所以联合也叫共用体&#xff09; 比如&#xff1a;共用了 i 这个较大的空间 二&#xff1a; 联合的特点 …
阅读更多...
matlab实现神经网络检测手写数字

matlab实现神经网络检测手写数字

一、要求 1.计算sigmoid函数的梯度&#xff1b; 2&#xff0e;随机初始化网络权重&#xff1b; 3.编写网络的代价函数。 二、算法介绍 神经网络结构&#xff1a; 不正则化的神经网络的代价函数&#xff1a; 正则化&#xff1a; S型函数求导&#xff1a; 反向传播算法&…
阅读更多...
阿里云服务器价格表2024，最新报价2核2G/2核4G/4核8G/8核16G/16核32G

阿里云服务器价格表2024，最新报价2核2G/2核4G/4核8G/8核16G/16核32G

2024年腾讯云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也可以直接移步到阿里云CLUB中心查看 aliyun.club 当前最新的云服务器优惠券…
阅读更多...
项目管理证书有何用？这些PMP考试机会一定要抓住

项目管理证书有何用？这些PMP考试机会一定要抓住

项目管理证书有何用&#xff1f;这些PMP考试机会一定要抓住&#xff01; PMP认证的中文全称是“项目管理专业人士资格认证”&#xff0c;是目前国际上声誉较高并且含金量比较高的项目管理证书之一&#xff0c;本人有幸考过&#xff0c;也通过PMP认证成功转岗&#xff0c;应该也…
阅读更多...
力扣刷题之21.合并两个有序链表

力扣刷题之21.合并两个有序链表

仅做学习笔记之用。 题目&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xf…
阅读更多...
进程和线程，线程实现的几种基本方法

进程和线程，线程实现的几种基本方法

什么是进程&#xff1f; 我们这里学习进程是为了后面的线程做铺垫的。 一个程序运行起来&#xff0c;在操作系统中&#xff0c;就会出现对应的进程。简单的来说&#xff0c;一个进程就是跑起来的应用程序。 在电脑上我们可以通过任务管理器可以看到&#xff0c;跑起来的应用程…
阅读更多...
几个简单的参数，实现计算特征向量的余弦相似度（java实现，纯手撸）

几个简单的参数，实现计算特征向量的余弦相似度（java实现，纯手撸）

几个简单的参数&#xff0c;实现计算特征向量的余弦相似度&#xff08;java实现&#xff0c;纯手撸&#xff09; 太狂喽&#xff01;突然高级起来&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&#x1f9e0;&am…
阅读更多...
基于图的在线社区假新闻检测建模

基于图的在线社区假新闻检测建模

论文原文&#xff1a;Graph-based Modeling of Online Communities for Fake News Detection 论文代码&#xff1a;GitHub - shaanchandra/SAFER: Repository containing the official code for the paper Graph-based Modeling of Online Communities for Fake News Detectio…
阅读更多...
这个国产原型设计工具，建议PM新人一定要用！

这个国产原型设计工具，建议PM新人一定要用！

Hello小伙伴们&#xff01;我是榛妮&#xff0c;原BAT大厂女产品经理一枚&#xff0c;目前在香港创业。 一转眼&#xff0c;做产品经理已经8年&#xff0c;想想入行时的种种往事&#xff08;尴尬情况&#xff09;&#xff0c;至今仍然历历在目。 说起刚入行时遇到的那些问题&a…
阅读更多...
判断链表是否为环形链表

判断链表是否为环形链表

目录 一、题目 二、代码 三、疑点代码解析 1.初始化 2.循环 3.if判断 4. 需要注意的是 一、题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为…
阅读更多...
Python综合实战案例-数据清洗分析

Python综合实战案例-数据清洗分析

写在前面&#xff1a; 本次是根据前文讲解的爬虫、数据清洗、分析进行的一个纵隔讲解案例&#xff0c;也是对自己这段时间python爬虫、数据分析方向的一个总结。 本例设计一个豆瓣读书数据⽂件&#xff0c;book.xlsx⽂件保存的是爬取豆瓣⽹站得到的图书数据&#xff0c;共 6067…
阅读更多...
python—接口编写部分

python—接口编写部分

最近准备整理一下之前学过的前端小程序知识笔记&#xff0c;形成合集。顺便准备学一学接口部分&#xff0c;希望自己能成为一个全栈嘿嘿。建议关注收藏&#xff0c;持续更新技术文档。 目录 前端知识技能树http请求浏览器缓存 后端知识技能树python_api&#xff1a;flaskflask…
阅读更多...
WebClient 同步、异步调用实现对比

WebClient 同步、异步调用实现对比

文章目录 一、概述二、pom依赖三、代码结构四、源码传送1、异步代码2、同步代码3、完整代码 一、概述 WebClient是Spring WebFlux模块提供的一个非阻塞的基于响应式编程的进行Http请求的客户端工具&#xff0c;从Spring5.0开始WebClient作为RestTemplete的替代品&#xff0c;有…
阅读更多...
Programming Abstractions in C阅读笔记：p331-p337

Programming Abstractions in C阅读笔记：p331-p337

《Programming Abstractions in C》学习第79天&#xff0c;p331-p337&#xff0c;总计7页。 一、技术总结 /** File: stack.h* -------------* This interface defines an abstraction for stacks. In any* single application that uses this interface, the values in* the…
阅读更多...
银行5G短消息应用架构设计

银行5G短消息应用架构设计

&#xff08;一&#xff09;RCS简介 1.1 RCS的提出与标准制定 RCS(Rich Communication Services & Suite&#xff0c;富媒体通信)是GSMA(Groupe Speciale Mobile Association&#xff0c;全球移动通信系统协会)在2008年提出的一种通讯方式&#xff0c;RCS融合了语音、消息…
阅读更多...
Django(一)- 环境搭建和快速入门

Django(一)- 环境搭建和快速入门

一、搭建环境 1、创建Python虚拟环境 (base) C:\Users\35351>conda create -n django_study python3.9 2、安装Django (django_study) C:\Users\35351>pip install Django >> 查看安装版本 (django_study) C:\Users\35351>python -m django --version 3、安…
阅读更多...
计算机毕业设计无从下手？学长带你从零开始，三天搞定！

计算机毕业设计无从下手？学长带你从零开始，三天搞定！

嘿&#xff0c;各位朋友们&#xff0c;我是小新&#xff01;&#x1f44b; 研究生的日子就像过山车一样&#xff0c;一转眼就快到终点站了。目前也是在面临着毕业论文的压力&#xff0c;好在前期付出的时间和努力比较多&#xff0c;现阶段只剩下一些小问题了&#xff0c;相对来…
阅读更多...
n维数字图像欧氏距离变换算法

n维数字图像欧氏距离变换算法

算法简介 该算法主要用于在三维图像中计算有效体素之间的最短欧几里得距离。 算法出处&#xff1a;NEW ALGORITHMS FOR EUCLIDEAN DISTANCE TRANSFORMATION OF AN n-DIMENSIONAL DIGITIZED PICTURE WITH APPLICATIONS 算法在体渲染加速中的应用&#xff1a;Accelerated Volum…
阅读更多...
[Halcon学习笔记]在Qt上实现Halcon窗口的字体设置颜色设置等功能

[Halcon学习笔记]在Qt上实现Halcon窗口的字体设置颜色设置等功能

1、 Halcon字体大小设置在Qt上的实现 在之前介绍过Halcon窗口显示文字字体的尺寸和样式&#xff0c;具体详细介绍可回看 &#xff08;一&#xff09;Halcon窗口界面上显示文字的字体尺寸、样式修改 当时介绍的设定方法 //Win下QString Font_win "-Arial-10-*-1-*-*-1-&q…
阅读更多...
忘记密码找回流程请求拦截器-前端

忘记密码找回流程请求拦截器-前端

目录 设置找回密码请求拦截器 1.相关参数 2.约定 代码实现 1. 实现思路 2. 实现代码 校园统一身份认证系统&#xff1a; 基于网络安全&#xff0c;找回密码、重新设置密码的流程和正常登录流程中密钥等请求头不一致。 设置找回密码请求拦截器 1.相关参数 clientId 应…
阅读更多...
最新文章

Copyright @ 2022~2023

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