首页 > 其他分享 >【Canvas与仪表盘】铝圈蓝底汽车速度仪表盘（可用键盘按键调节速度值）

【Canvas与仪表盘】铝圈蓝底汽车速度仪表盘（可用键盘按键调节速度值）

时间：2024-12-20 21:56:43浏览次数：6  
标签：蓝底 function canvas keyID angle 仪表盘 true 铝圈 stage

【速度调节方法】

W或上箭头加速，S或下箭头减速。

【成图】

120*120的png图标

大小图：

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>铝圈蓝底汽车速度表 Draft1</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=WIDTH;
    canvas.height=HEIGHT;

    // 响应键盘按下事件
    canvas.addEventListener('keydown', doKeyDown, true);
    window.addEventListener('keydown', doKeyDown, true);
    
    // 响应键盘弹起事件
    canvas.addEventListener('keyup', doKeyUp, true);
    window.addEventListener('keyup', doKeyUp, true);

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

//------------------------------------
// 响应键盘按下事件
//------------------------------------
function doKeyDown(e) {
    var keyID = e.keyCode ? e.keyCode :e.which;
    
    if(keyID === 38 || keyID === 87)  { // up arrow and W
        stage.speedUp=true;
        e.preventDefault();
    }
    if(keyID === 40 || keyID === 83)  { // down arrow and S
        stage.speedDown=true;
        e.preventDefault();
    }    
}

//------------------------------------
// 响应键盘弹起事件
//------------------------------------
function doKeyUp(e) {
    var keyID = e.keyCode ? e.keyCode :e.which;
    
    if(keyID === 38 || keyID === 87)  { // up arrow and W
        stage.speedUp=false;
        e.preventDefault();
    }
    if(keyID === 40 || keyID === 83)  { // down arrow and S
        stage.speedDown=false;
        e.preventDefault();
    }    
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    this.angle=Math.PI/2*3;// 当前指针所在角度
    this.speedUp=false;    // 可否提速
    this.speedDown=false;  // 可否减速

    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){  
        const STEP=0.02;
        const START_ANGLE=Math.PI*2/3;
        const END_ANGLE=Math.PI*2/6*7;

        if(this.speedUp){
            this.angle+=STEP;
        }
        if(this.angle>END_ANGLE){
            this.angle=END_ANGLE;
        }

        if(this.speedDown){
            this.angle-=STEP;
        }        
        if(this.angle<START_ANGLE){
            this.angle=START_ANGLE;
        }
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
    }

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.save();
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();
        
        const R=210;//基准尺寸

        // 第1圈
        ctx.save();
        var r=1.00*R;
        var gnt=ctx.createRadialGradient(0,0,0,0,0,r);
        gnt.addColorStop(0,"rgb(152,152,152)");
        gnt.addColorStop(0.9,"rgb(152,152,152)");
        gnt.addColorStop(0.95,"rgb(251,251,251)");
        gnt.addColorStop(1,"rgb(255,255,255)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();
        
        // 第2圈
        ctx.save();
        var r=0.91*R;
        drawSolidCircle(ctx,0,R/105*2,r,"rgb(154,154,154)");
        ctx.restore();    

        // 第3圈
        ctx.save();
        var r=0.90*R;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(255,255,255)");
        gnt.addColorStop(0.25,"rgb(196,188,185)");
        gnt.addColorStop(0.5,"rgb(113,105,103)");
        gnt.addColorStop(0.75,"rgb(44,40,37)");
        gnt.addColorStop(1,"rgb(5,5,5)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();
        
        // 第4圈
        ctx.save();
        var r=0.80*R;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(87,83,80)");
        gnt.addColorStop(0.25,"rgb(123,123,123)");
        gnt.addColorStop(0.5,"rgb(206,204,205)");
        gnt.addColorStop(0.75,"rgb(246,246,246)");
        gnt.addColorStop(1,"rgb(255,255,255)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();    

        // 第5圈
        ctx.save();
        var r=0.76*R;
        drawSolidCircle(ctx,0,0,r,"black");
        ctx.restore();

        // 第6圈
        ctx.save();
        var r=0.75*R;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(41,122,151)");
        gnt.addColorStop(1,"rgb(61,5,66)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();

        // 第7圈
        ctx.save();
        var r=0.74*R;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(0,54,108)");
        gnt.addColorStop(1,"rgb(40,0,32)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();

        // 第7圈 三条色带
        ctx.save();
        var r=0.74*R;        
        var rOut=r;
        var rIn=rOut*0.9;
        ctx.fillStyle="rgb(98,226,227)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/6*4,Math.PI/6*7);
        ctx.fill();
        ctx.fillStyle="rgb(53,162,218)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/6*7,Math.PI/6*11);
        ctx.fill();
        ctx.fillStyle="rgb(255,99,113)";
        drawFan(ctx,0,0,rIn,rOut,Math.PI/6*11,Math.PI/6*14);
        ctx.fill();
        ctx.restore();

        // 第8圈 小刻度
        ctx.save();
        var r=0.74*R;        
        var rOut=r;
        var rIn=r*0.95;
        var N=50;
        ctx.lineWidth=R/210*1;
        ctx.strokeStyle="white";
        for(var i=1;i<N;i++){
            var theta=Math.PI*2/6*5/N*i+Math.PI/3*2;
            var a=createPt(rOut*Math.cos(theta),rOut*Math.sin(theta));
            var b=createPt(rIn*Math.cos(theta),rIn*Math.sin(theta));
            ctx.beginPath();
            ctx.moveTo(a.x,a.y);
            ctx.lineTo(b.x,b.y);
            ctx.stroke();
        }
        ctx.restore();

        // 第8圈 大刻度
        ctx.save();
        var r=0.74*R;        
        var rOut=r;
        var rIn=r*0.90;
        var N=10;
        ctx.lineWidth=R/210*2;
        ctx.strokeStyle="white";
        for(var i=1;i<N;i++){
            var theta=Math.PI*2/6*5/N*i+Math.PI/3*2;
            var a=createPt(rOut*Math.cos(theta),rOut*Math.sin(theta));
            var b=createPt(rIn*Math.cos(theta),rIn*Math.sin(theta));
            ctx.beginPath();
            ctx.moveTo(a.x,a.y);
            ctx.lineTo(b.x,b.y);
            ctx.stroke();
        }
        ctx.restore();

        // 第8圈 数值
        ctx.save();
        var r=0.60*R;        
        var N=10;
        ctx.lineWidth=R/210*2;
        ctx.strokeStyle="white";
        for(var i=0;i<N+1;i++){
            var theta=Math.PI*2/6*5/N*i+Math.PI/3*2;
            var a=createPt(r*Math.cos(theta),r*Math.sin(theta));
            writeText(ctx,a.x,a.y+r*0.05,i*20,R/210*12+"px consolas","white");
        }
        ctx.restore();

        // 绘制指针
        drawPointer(ctx,this.angle,R);

        // 绘制文字
        ctx.save();  
        var r=R*0.76;
        var angle=(this.angle-Math.PI*2/3)/(Math.PI*2/6*5)*200;
        var text=angle.toFixed(0);        
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.16+"px Microsoft YaHei UI";
        ctx.fillStyle="rgb(229,217,69)";
        ctx.fillText(text,-r/6,r/2);// 速度值
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.14+"px Microsoft YaHei UI";
        ctx.fillStyle="white";
        ctx.fillText(" km/h",+r/6,r/2);// 单位
        ctx.restore();
                
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于画速度表指针
ctx:绘图上下文
angle:旋转角
radius:最大半径
----------------------------------------------------------*/
function drawPointer(ctx,angle,radius){
    const R=radius*0.5;

    ctx.save();
    ctx.rotate(angle);

    var r=R;// 右半指针
    ctx.fillStyle = "rgb(255,73,31)";
    ctx.moveTo(r,0);
    ctx.lineTo(-r/4,0);
    ctx.lineTo(-r/5,r/40);
    ctx.lineTo(r*0.95,r*0.01);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "red";// 左半指针
    ctx.beginPath();
    ctx.moveTo(r,0);
    ctx.lineTo(-r/4,0);
    ctx.lineTo(-r/5,-r/40);
    ctx.lineTo(r*0.95,-r*0.01);
    ctx.closePath();
    ctx.fill();

    var r=0.15*R;// 盖板大圈        
    var gnt=ctx.createLinearGradient(r,0,-r,0);    
    gnt.addColorStop(0,"navy");
    gnt.addColorStop(0.3,"rgb(6,22,45)");
    gnt.addColorStop(1,"black");
    drawSolidCircle(ctx,0,0,r,gnt);

    r=0.12*R;// 盖板小圈
    var gnt=ctx.createLinearGradient(r,0,-r,0);
    gnt.addColorStop(0,"blue");
    gnt.addColorStop(0.30,"navy");
    gnt.addColorStop(1,"rgb(6,22,45)");
    drawSolidCircle(ctx,0,0,r,gnt);

    ctx.restore();
}

/*----------------------------------------------------------
函数:用于绘制扇形
ctx:绘图上下文
x:扇形圆心心横坐标
y:扇形圆心纵坐标
rIn:扇形内径
rOut:扇形外径
startAngle:起始角度
endAngle:中止角度
----------------------------------------------------------*/
function drawFan(ctx,x,y,rIn,rOut,startAngle,endAngle){
    var a=createPt(x+rIn*Math.cos(startAngle),y+rIn*Math.sin(startAngle));
    var b=createPt(x+rOut*Math.cos(startAngle),y+rOut*Math.sin(startAngle));
    var c=createPt(x+rOut*Math.cos(endAngle),y+rOut*Math.sin(endAngle));
    var d=createPt(x+rIn*Math.cos(endAngle),y+rIn*Math.sin(endAngle));

    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.arc(0,0,rOut,startAngle,endAngle,false);
    ctx.lineTo(c.x,c.y);
    ctx.lineTo(d.x,d.y);
    ctx.arc(0,0,rIn,endAngle,startAngle,true);
    ctx.closePath();
}

// 绘制尖朝上的正六边形，是drawPolygon的套娃函数
function drawSixgon(ctx,x,y,r){
    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(Math.PI/2);
    drawPolygon(ctx,6,0,0,r);
    ctx.restore();
}

/*----------------------------------------------------------
函数:绘制正多边形
n:正多边形的边数
x:正多边形中心的横坐标
y:正多边形中心的纵坐标
r:正多边形中心到顶点的距离
----------------------------------------------------------*/
function drawPolygon(ctx,n,x,y,r){
    var polyArr=[];
    for(var i=0;i<n;i++){
        var theta=Math.PI*2/n*i;
        var pt={};
        pt.x=r*Math.cos(theta)+x;
        pt.y=r*Math.sin(theta)+y;
        polyArr.push(pt);
    }

    ctx.beginPath();
    for(let i=0;i<polyArr.length;i++){
        ctx.lineTo(polyArr[i].x,polyArr[i].y);
    }
    ctx.closePath();
}

/*----------------------------------------------------------
函数:用于绘制圆角矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
radius:圆角半径
----------------------------------------------------------*/
function drawRoundRect(ctx,x,y,width,height,radius){
    ctx.beginPath();
    ctx.moveTo(x-width/2+radius,y-height/2);
    ctx.lineTo(x+width/2-radius,y-height/2);
    ctx.arcTo(x+width/2,y-height/2,x+width/2,y-height/2+radius,radius);
    ctx.lineTo(x+width/2,y-height/2+radius);
    ctx.lineTo(x+width/2,y+height/2-radius);
    ctx.arcTo(x+width/2,y+height/2,x+width/2-radius,y+height/2,radius);
    ctx.lineTo(x+width/2-radius,y+height/2);
    ctx.lineTo(x-width/2+radius,y+height/2);
    ctx.arcTo(x-width/2,y+height/2,x-width/2,y+height/2-radius,radius);
    ctx.lineTo(x-width/2,y+height/2-radius);
    ctx.lineTo(x-width/2,y-height/2+radius);
    ctx.arcTo(x-width/2,y-height/2,x-width/2+radius,y-height/2,radius);
    ctx.closePath();
}

/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){
    ctx.beginPath();
    ctx.moveTo(x-width/2,y-height/2);
    ctx.lineTo(x+width/2,y-height/2);
    ctx.lineTo(x+width/2,y+height/2);
    ctx.lineTo(x-width/2,y+height/2);
    ctx.closePath();
}


/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){
    ctx.fillStyle=style;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
个人当前的四大难题

1.45岁失业怎样才能挺到65岁退休？
2.怎么在养不起一胎的情况下生三胎？
3.怎么在不提高收入的情况下促进消费？
4.怎么在房贷/车贷还完之前又贷款购置新房/新车？
--------------------------------------------------------------*/
//-->
</script>

END

标签：蓝底,function,canvas,keyID,angle,仪表盘,true,铝圈,stage
From： https://blog.csdn.net/River_Sun/article/details/144583228

相关文章

  • 【免费可视化仪表盘】轻松实现静态/动态数据可视化图表—积木仪表盘
    在当今信息爆炸的时代，如何从海量数据中快速提取关键信息，实现高效决策，成为了企业和个人面临的重大挑战。而积木仪表盘，就如同一位智慧的导航者，为你轻松开启数据可视化的精彩之旅。代码下载https://github.com/jeecgboot/JimuReport技术文档官方网站：http://jimureport.co......
  • 12V24V30V36V48V52V60V降压恒压芯片IC -H6246 电流简单，外围少，性价比高 仪表盘供电方案
    H6246降压恒压芯片：高效、可靠、多功能的电源管理解决方案在现代电子设备中，电源管理芯片扮演着至关重要的角色。今天，我们要为大家介绍一款性能出色、功能丰富的降压恒压芯片——H6246。这款芯片以其高效、可靠和多功能的特点，成为众多应用场景中的不错选择。高效性能：H6246支持宽电压......
  • 【Canvas电脑桌面】蓝底金圈纹桌面(1920*1080)
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>蓝底金圈纹桌面</title><styletype="text/css&quo......
  • AI应用任何PDF转换为交互式仪表盘
    AI应用任何PDF转换为交互式仪表盘 背景      在不到一分钟的时间内将任何PDF转换为交互式仪表板（下面的提示词）：这适用于所有可以正确编码的AI聊天机器人，例如ChatGPT4o、MistralLarge2、ClaudeSonnet3.5、Llama405b等大模型。ChatGPT4.0:开发商:OpenAI......
  • Grafana的仪表盘URL参数设置
    转载请注明出处：在调试grafana时，需要对grafana进行share的url图表进行一些自定义设置，总结下常用的参数参考网站：https://grafana.com/docs/grafana/latest/dashboards/share-dashboards-panels/#dashboard-share-url-parameters1.参数列表orgId：指定组织的ID，用于加载特......
  • Qt实现仪表盘-自定义控件
            仪表盘在很多汽车和物联网相关的系统中很常用，本文就来介绍一下Qt 仪表盘的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。一、简述         使用Qt绘制一个仪表盘，用来显示当前的温度，绘制刻度、绘制数字......
  • Qt实现汽车仪表盘
    在UI界面显示中，仪表盘的应用相对比较广泛，经常用于显示速度值，电压电流值等等，最终实现效果如下动态图片（文末提供给源工程下载）： 主要包含以下绘制步骤：绘制画布/**绘制画布*/voidWidget::initCanvas(QPainter&painter){//消除锯齿painter.setRenderHint(QPai......
  • 创新驱动，智享未来：电动车仪表盘之蓝牙芯方案
    创新驱动，智享未来：电动车仪表盘之蓝牙芯方案 电动车行业不断发展的浪潮中，我们自豪地推出引领时代的电动车仪表盘蓝牙芯方案，为您的骑行之旅带来前所未有的智能与便捷。 精准掌控，一目了然 我们的蓝牙芯方案搭载了高性能BLE5.0蓝牙芯片-HS6621CG-C内核ARMCortex-M4F,max......
  • 常见仪表盘指示灯的含义，这次够全了！
     汽车是当前主要的交通工具之一，给人们的工作、生活提供了便利。大家在学会开车的同时，也得了解一些基本的汽车常识，可以及时的发现车辆的问题，并作出正确的判断，以此降低车辆的损耗和维修成本。其中最基本的，就是要学会看车辆仪表指示标志。汽车的仪表盘是汽车本身许多的功能模块......
  • 推荐二轮电动车仪表盘蓝牙主芯片方案-HS6621CGC
      随着国内二轮电动车的火热开启，电动车的智能化程度越来越高；电动车的智能操控需求也越来越高，现在介绍蓝牙控制面板的一些功能；例如：定位（GNSS），设防，实时上报数据（CAT.1）；终端支持蓝牙OTA升级；BMS（蓝牙数传）；一键启动；蓝牙钥匙（蓝牙APP解锁，无感解锁）等等功能，这些功能都可以依托OM6621PX系列作为......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99