canvas画仪表盘画示向图

最新推荐文章于 2023-12-26 13:38:02 发布
最新推荐文章于 2023-12-26 13:38:02 发布
阅读量322 收藏
点赞数
文章标签： canvas js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43676252/article/details/108050561
版权

代码：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

<meta charset="UTF-8">

<title>canvas</title>
<style>
    #box{
        width: 600px;
        height: 600px;
        position: relative;
        margin-left: 100px;
    }
    #hover{
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 22px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #000;
        background-color: #f1f100;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    #click{
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 22px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #000;
        background-color: #00ffff;
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>

</head>

<body>
    <div id="box">
        <canvas id="clock" width="600px" height="600px">您的浏览器不支持canvas</canvas>
        <div id="hover">0.0</div>
        <div id="click">0.0</div>
    </div>
    <script type="text/javascript">
        var clock = document.getElementById("clock");
        clock.style.backgroundColor = "black";
        var graph = null;
        var outside_circle_r = 300;/*外圆半径*/
        var inside_circle_r = 230;/*内圆半径*/
        if (clock.getContext) {
            drawClock();
        }
        function drawClock() {
            graph = clock.getContext("2d");
            /*先清除整个图*/
            graph.clearRect(0, 0, clock.width, clock.height);
            graph.strokeStyle = "black";
            graph.save();
            graph.beginPath();
            //画圆
            graph.strokeStyle = "white";
            graph.moveTo(550,300);
            graph.arc(300,300,inside_circle_r,0,2*Math.PI,false);
            graph.stroke();
            
            //画大刻度
            var hour_len = 20;//刻度长度
            var hourAngleArray = [];
            for(let i = 0;i < 10;i++){
                hourAngleArray.push(i*Math.PI/18);
            }
            drawHourAndMinuteLine(hourAngleArray,hour_len);

            //画小刻度
            var minuteAngleArray = [];
            var minute_len = 10;//刻度长度
            for(let i = 0;i < 360;i++){
                minuteAngleArray.push(i*Math.PI/90);
            }
            drawHourAndMinuteLine(minuteAngleArray,minute_len);

            //画刻度文本值
            // x = 圆心x + r * Math.cos( Math.PI / 180 * angle)
            // y = 圆心y + r * Math.sin(Math.PI / 180 * angle)
            for (let index = 0; index < 360; index+=10) {
                const angle = index - 90
                const x1 = 300 + inside_circle_r * Math.cos(Math.PI / 180 * angle)
                const y1 = 300 + inside_circle_r * Math.sin(Math.PI / 180 * angle)
                const x = x1+Math.cos(2*Math.PI/360*angle)*40
                const y = y1+Math.sin(2*Math.PI/360*angle)*40
                drawText("white","bold 16px Arial","center","middle",index,x,y);
            }
            // 画之前点击的线
            if(localStorage.getItem("clickLineX") && localStorage.getItem("clickLineY")){
                drawClickLine(localStorage.getItem("clickLineX"),localStorage.getItem("clickLineY"))
            }
            // 画仰度的点
            drawCricle()
        }

    function drawText(fillStyle,font,textAlign,textBaseline,size,x,y){
        graph.fillStyle = fillStyle;
        graph.font = font;
        graph.textAlign = textAlign;
        graph.textBaseline = textBaseline;
        graph.fillText(size,x,y);
    }

    /*画一条线段的函数*/
    function drawStraightLine(color,X,Y,toX,toY){
        graph.beginPath();
        graph.strokeStyle = color;
        graph.moveTo(X,Y);
        graph.lineTo(toX,toY);
        graph.stroke();
    }

    /*画出时间刻度*/
    function drawHourAndMinuteLine(timeType,len){
        for(let i = 0;i < timeType.length;i++){
            let x = outside_circle_r+inside_circle_r*Math.cos(timeType[i]);
            let y = outside_circle_r-inside_circle_r*Math.sin(timeType[i]);
            let toX = x+len*Math.cos(timeType[i]);
            let toY = y-len*Math.sin(timeType[i]);
            let toXLeftTop = outside_circle_r-inside_circle_r*Math.cos(timeType[i])-len*Math.cos(timeType[i]);
            let toYRightBottom = outside_circle_r+inside_circle_r*Math.sin(timeType[i]);
            drawStraightLine("white",x,y,toX,toY);//右上刻度
            drawStraightLine("white",outside_circle_r-inside_circle_r*Math.cos(timeType[i]),y,toXLeftTop,toY);//左上刻度
            drawStraightLine("white",x,toYRightBottom,toX,toYRightBottom+len*Math.sin(timeType[i]));//右下刻度
            drawStraightLine("white",outside_circle_r-inside_circle_r*Math.cos(timeType[i]),toYRightBottom,toXLeftTop,toYRightBottom+len*Math.sin(timeType[i]));//左下刻度
        }
    }
    window.onload=function(){
        
        // 鼠标悬停事件
        clock.onmousemove=function(e){
            // 0-180度的角度
            if(e.offsetY<=600&&e.offsetY>=300){
                const angle1 = Math.atan((e.offsetX-outside_circle_r)/(e.offsetY-outside_circle_r))*180/Math.PI
                document.getElementById("hover").textContent = (90-angle1 +90).toFixed(1)
                const follwLineX =  300 + inside_circle_r * Math.cos( Math.PI / 180 * (90-angle1))
                const follwLineY =  300 + inside_circle_r * Math.sin( Math.PI / 180 * (90-angle1))
                drawClock();
                drawFollwLine(follwLineX,follwLineY)
            }else{
                // 180-360的角度
                const angle1 = Math.atan((e.offsetX-outside_circle_r)/(e.offsetY-outside_circle_r))*180/Math.PI
                const temp = 270-angle1
                if(temp >= 180 && temp < 270){
                    document.getElementById("hover").textContent = (temp +90).toFixed(1)
                }else{
                    document.getElementById("hover").textContent = (temp-270).toFixed(1)
                }
                const follwLineX =  300 + inside_circle_r * Math.cos( Math.PI / 180 * (270-angle1))
                const follwLineY =  300 + inside_circle_r * Math.sin( Math.PI / 180 * (270-angle1))
                drawClock();
                drawFollwLine(follwLineX,follwLineY)
            }
        }
        // 鼠标点击
        clock.onclick=function(e){
            // 0-180度的角度
            if(e.offsetY<=600&&e.offsetY>=300){
                const angle1 = Math.atan((e.offsetX-outside_circle_r)/(e.offsetY-outside_circle_r))*180/Math.PI
                document.getElementById("click").textContent = (90-angle1 +90).toFixed(1)
                const follwLineX =  300 + inside_circle_r * Math.cos( Math.PI / 180 * (90-angle1))
                const follwLineY =  300 + inside_circle_r * Math.sin( Math.PI / 180 * (90-angle1))
                localStorage.setItem("clickLineX",follwLineX);
                localStorage.setItem("clickLineY",follwLineY);
                drawClock();
                drawClickLine(follwLineX,follwLineY)
            }else{
                // 180-360的角度
                const angle1 = Math.atan((e.offsetX-outside_circle_r)/(e.offsetY-outside_circle_r))*180/Math.PI
                const temp = 270-angle1
                if(temp >= 180 && temp < 270){
                    document.getElementById("click").textContent = (temp +90).toFixed(1)
                }else{
                    document.getElementById("click").textContent = (temp-270).toFixed(1)
                }
                const follwLineX =  300 + inside_circle_r * Math.cos( Math.PI / 180 * (270-angle1))
                const follwLineY =  300 + inside_circle_r * Math.sin( Math.PI / 180 * (270-angle1))
                localStorage.setItem("clickLineX",follwLineX);
                localStorage.setItem("clickLineY",follwLineY);
                drawClock();
                drawClickLine(follwLineX,follwLineY)
                
            }
        }
    }
    // 跟随线
    function drawFollwLine(follwLineX,follwLineY){
        graph.save();//保存新的圆点
        graph.beginPath();
        graph.strokeStyle = "#f1f100";
        graph.moveTo(follwLineX, follwLineY);
        graph.lineTo(300, 300);
        graph.stroke();
        graph.stroke();
    }
    //点击线
    function drawClickLine(follwLineX,follwLineY){
        graph.save();//保存新的圆点
        graph.beginPath();
        graph.strokeStyle = "#00ffff";
        graph.moveTo(follwLineX, follwLineY);
        graph.lineTo(300, 300);
        graph.stroke();
        graph.stroke();
    }
    // 根据刻度打点
    // x = 圆心x + r * Math.cos( Math.PI / 180 * angle)
    // y = 圆心y + r * Math.sin(Math.PI / 180 * angle)
    function drawPoint(direction,jantho,rgba){
        // 幅度计算透明度
        const opacity = rgba/100
        const rgba1 = 'rgba(225,0,0,'+opacity+')'
        const angle = direction - 90
        // 通过半径和仰角，计算在圆上的斜边长度
        const proportion = (inside_circle_r * jantho) / 90
        // 计算刻度在圆上的位置
        const x1 = 300 + inside_circle_r * Math.cos(Math.PI / 180 * angle)
        const y1 = 300 + inside_circle_r * Math.sin(Math.PI / 180 * angle)
        // 计算  根据仰度绘制的三角形的对边和临边的长度
        const angle1 = 90-(direction - 90)
        const x2 = x1- Math.sin(Math.PI / 180 * angle1)*proportion
        const y2 = y1- Math.cos(Math.PI / 180 * angle1)*proportion
        // 画圆
        graph.fillStyle = rgba1;
        graph.moveTo(x2+5,y2);
        graph.arc(x2,y2,5,0,2*Math.PI,false);
        graph.fill();
    }
    function drawCricle(){
        const dataArray = [
            [126,10,53],
            [125,10,72],
            [123,10,55],
            [126,10,85],
            [122,10,85],
            [125,10,100],
            [128,10,90],
            [128,10,80],
            [126,10,70],
            [124,10,10],
            [190,10,0],
            [210,10,50],
            [230,10,100],
            [300,10,40],
            [30,10,50],
            [124,10,60]
        ]
        let index = 0
        const timeout = setInterval(()=>{
            if(index<dataArray.length){
                drawPoint(dataArray[index][0],dataArray[index][1],dataArray[index][2])
                index++
            }else{
                clearInterval(timeout);
            }
        },200)
    }
    </script>

</body>
</html>

效果：
在这里插入图片描述

吃我一锅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter——Canvas之最权威仪表盘进度实战
人生在世
03-22 331
【代码】Flutter——Canvas之最权威仪表盘进度实战。
Canvas绘画仪表盘效果
zhou13528482267的博客
12-18 604
一、仪表盘效果： 2、代码逻辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制仪表盘</title> <style> body { background: #969696; } </style> </head> <body> <canva
记Tkinter制作的飞机仪表控件
weixin_43528943的博客
04-16 1885
前言 最近在做基于公网通信的遥控固定翼。飞机、控制端、服务器都用Python开发。之前没有做过GUI项目，所以搭建了PyQt，尝试发现designer里提供的一些控件都不适用，所以还是需要手写代码。Tkinter之前做过一些相关的练习，所以最终选择了用Tkinter来做控制端的UI。 目标 控制端也跑在树莓派上（因为油门杆、侧杆、AP旋钮什么的用旋转编码器的好接） 使用单屏幕，长宽比约为16:9的...
纯JS+Vue和canvas实现一个仪表盘
为了皮肤，争取早日到Lv4。
07-31 3020
【代码】纯JS+Vue实现一个仪表盘。
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
thj13896076523的博客
02-08 1424
因为动画效果比较消耗性能，所以进度条单独canvas绘制
小程序中使用echarts，案例一：实现仪表盘
最新发布
qq_45290368的博客
12-26 945
小程序中使用echarts，案例一：实现仪表盘
HTML5 Canvas动画仪表盘特效.zip
11-18
HTML5 Canvas动画仪表盘特效.zip
H5 Canvas百分比仪表盘特效
07-24
H5 Canvas百分比仪表盘特效是一款基于HTML5 Canvas绘制的圆形仪表盘动画特效。
canvas绘制仪表盘
11-24
用原生canvas绘制仪表盘，代码简单，参数可传递。本代码既可以用于学习canvas，也可以用于项目中。
汽车仪表盘canvas动画.zip
12-02
canvas，编写的html5,汽车仪表盘插件，原生js,不含jquery。。。。。。。存手工撸代码
html5 canvas绘制环形进度条，环形渐变色仪表图
weixin_33907511的博客
10-11 708
html5 canvas绘制环形进度条，环形渐变色仪表图 在绘制圆环前，我们需要知道canvasarc()方法。 一：绘制环形进度条 <canvas id="myCanvas1" data-percent="60"> 您的浏览器不支持canva...
canvas仪表盘
12-21
canvas仪表盘，模仿淘宝信用评级仪表盘
HTML5Canvas仪表
08-10
HTML5 Canvas 仪表
js canvas实现适用于移动端的百分比仪表盘dashboard
10-19
主要为大家详细介绍了js canvas实现适用于移动端的百分比仪表盘dashboard，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
g6学习笔记三(Graph）
vue6214的博客
02-23 4076
Graph 是 G6 图表的载体,有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
Draw Clock
坟头草一米七五
09-12 386
绘制时钟 javaScript Html5
Canvas绘制一个类似老版支付宝信用分仪表盘效果
weixin_33836874的博客
03-30 265
前言 使用了ESM+TS的风格来写一个类似老版本支付宝信用分的效果(会动!!!)； 一开始用的是普通的ES5+的风格来写，这两版的代码都会展示， 模块的版本增加了一些细节的考虑，有兴趣的看官可以看看 效果图及Demo 具体的效果图可以在Codesanbox上看 Codesanbox : codesandbox.io/s/4rvo5mwxj… 具体的亮点可以看README Github: githu...
仪表盘动画
weixin_43998944的博客
11-17 1166
仪表盘动画 小程序中使用到了仪表盘动画，在小程序上使用方式是采用canvas 去绘制的，canvas 绘制是需要一定时间， 并且绘制出来的图在华为p30 p40 上有很大概览的适配性问题，后期需要使用h5 开发相同功能 ， 果断抛弃了canvas 采用了css 来实现了仪表盘动画 效果图 实现思路 1、让ui给一张底部为透明的刻度图片， 绝对定位 ， 设置z-index 值 2、准备个盒子相同与刻度图片相同宽高的绝对定位叠到刻度图片上 3、通过css3的旋转属性，旋转以便达到变色的效果 4、计算旋转角度，
canvas 绘制仪表盘
m0_37327931的博客
08-18 1186
Title #my-canvas{ width: 100%; height: 11rem; } function getP
canvas画正负仪表盘
05-25
<title>Canvas 正负仪表盘 <canvas id="myCanvas" width="400" height="400"></canvas> // 获取 Canvas 元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值