数学还勉强管用，用代码还能画个canvas 仪表盘(含完整代码) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    /*canvas{border:dashed 2px #CCC}*/
 </style>
 <script type="text/javascript">
    var canid;
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.beginPath();
        cans.arc(400,300,180,-10,0,false);
        //cans.closePath();
        cans.strokeStyle = 'red';
        cans.fillStyle = "blue";
        cans.lineWidth = 30;
        cans.stroke();

        cans.beginPath();
        cans.arc(400,300,90,0,4/3*Math.PI,true);
        //cans.closePath();
        cans.strokeStyle = 'red';
        cans.fillStyle = "blue";
        cans.lineWidth = 10;
        cans.fill();

        //cans.beginPath();
        //cans.arc(400,300,90,0,Math.PI,2);
        //cans.closePath();
        //cans.strokeStyle = 'blue';
        //cans.lineWidth = 80;
        //cans.stroke();
    }

    function pageLoad2(a,b,c,d,e,f,g){
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.beginPath();
        cans.arc(a,b,c,d,e,f);
        cans.strokeStyle = g;
        cans.fillStyle = g;
        cans.lineWidth = 30;
        cans.stroke();

        cans.font = "bold 30px Arial";
        cans.fillStyle = g;
    }

    function Drawarc(yuanxinx,yuanxiny, banjing, value, dengfen){
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.beginPath();
        cans.arc(yuanxinx,yuanxiny,banjing,(Math.PI*2)*(180/360),(Math.PI*2)*(((180/dengfen)*value+178)/360),false);
        var yanse;
        if (value<=7)
            yanse = '#81d135';
        if (value>7 && value<=14)
            yanse = '#fdc159';
        if (value>14)
            yanse = '#fb6376';
        cans.strokeStyle = yanse;
        cans.fillStyle = yanse;
        cans.lineWidth = 2;
        cans.stroke();

        cans.font = "bold 30px Arial";
        cans.fillStyle = yanse;
    }

    function Square(x)
    {
        return x*x;
    }

    function DrawLine(x1,y1,x2,y2)
    {
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.strokeStyle='#000';
        cans.lineWidth=1;
        //cans.lineCap='square';
        cans.beginPath();
        cans.moveTo(x1,y1);
        cans.lineTo(x2,y2);
        cans.stroke();
        //cans.closePath();
    }

    function Drawarc1(yuanxinx,yuanxiny, banjing, value, dengfen){
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.beginPath();
        var jiaodu = 180 - (180/dengfen)*value;
        var jiaodu1 = jiaodu-1.8;
        var jiaodu2 = jiaodu+1.8;
        var x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0);
        var y1 = yuanxiny - banjing * Math.sin((jiaodu * 3.14)/180.0);


        var jiaodian1x = yuanxinx + banjing * Math.cos((jiaodu1 * 3.14)/180.0);
        var jiaodian1y = yuanxiny - banjing *Math.sin((jiaodu1 * 3.14)/180.0);
        var jiaodian2x = yuanxinx + banjing * Math.cos((jiaodu2 * 3.14)/180.0);
        var jiaodian2y = yuanxiny - banjing *Math.sin((jiaodu2 * 3.14)/180.0);

        //缩短短半径
        //alert(x1 +','+ y1);
        var sdbanjing = banjing -20;
        var jiaodian3x = yuanxinx + sdbanjing *Math.cos((jiaodu * 3.14)/180.0);
        var jiaodian3y = yuanxiny - sdbanjing *Math.sin((jiaodu * 3.14)/180.0);

        var jcbanjing = banjing +6;
        var jiaodian4x = yuanxinx + jcbanjing *Math.cos((jiaodu * 3.14)/180.0);
        var jiaodian4y = yuanxiny - jcbanjing *Math.sin((jiaodu * 3.14)/180.0);

        //alert(jiaodian3x +','+ jiaodian3y);

        DrawLine(jiaodian1x,jiaodian1y, jiaodian3x, jiaodian3y);
        DrawLine(jiaodian2x,jiaodian2y, jiaodian3x, jiaodian3y);

        //DrawLine(jiaodian1x,jiaodian1y, jiaodian4x, jiaodian4y);
        //DrawLine(jiaodian2x,jiaodian2y, jiaodian4x, jiaodian4y);

        cans.arc(x1,y1,4,0,Math.PI*2,false);
        var yanse;
        if (value<=7)
            yanse = '#81d135';
        if (value>7 && value<=14)
            yanse = '#fdc159';
        if (value>14)
            yanse = '#fb6376';
        cans.strokeStyle = yanse;
        cans.fillStyle = yanse;
        cans.lineWidth = 2;
        cans.stroke();

        //(a^2 + c^2 - b^2) / (2·a·c)
        var jiajiao = Math.round( Math.acos( (Square(banjing)+ Square(banjing) - Square(4)) / (2*banjing*banjing) ) * 180/Math.PI );
        //alert(jiajiao);
    }

    function Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse)
    {
        var can = $$(canid);
        var cans = can.getContext('2d');
        for (var i=0;i<dengfen;i++)
        {
            dfjd = ((jieshujd - kaishijd)/dengfen)*i;
            cans.beginPath();
            cans.arc(yuanxinx,yuanxiny,banjing, (Math.PI*2)*((kaishijd+dfjd)/360),(Math.PI*2)*((kaishijd+dfjd+1)/360),false);
            cans.strokeStyle = yanse;
            cans.lineWidth = 20;
            cans.stroke();
        }
    }

    function DrawText(yuanxinx,yuanxiny, banjing, jiaodu, text, g)
    {
        var can = $$(canid);
        var cans = can.getContext('2d');
        cans.font = "bold 10px Arial";
        cans.strokeStyle = g;
        cans.fillStyle = g;
        var jcbanjing = banjing -15;
        x1 = yuanxinx + jcbanjing * Math.cos((jiaodu * Math.PI)/180.0);
        //if (jiaodu>90)
        //    x1 = x1 +10;
        //else
        //    x1 = x1-18;
        y1   =  yuanxiny - jcbanjing *Math.sin((jiaodu * Math.PI)/180.0);
        cans.fillText(text,x1,y1);
    }

    function dashboard(id)
    {
        canid = id;
        var can = $$(canid);
        var banjing = (can.width/2);
        var yuanxinx = can.width/2;
        var yuanxiny = can.height;
        var cans = can.getContext('2d');
        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(180/360),(Math.PI*2)*(240/360),false,'#81d135');
        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(240/360),(Math.PI*2)*(300/360),false,'#fdc159');
        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(300/360),(Math.PI*2)*(360/360),false,'#fb6376');




        Drawscaleline(yuanxinx,yuanxiny,banjing-40,180,240,6, '#6db52b');
        Drawscaleline(yuanxinx,yuanxiny,banjing-40,240,300,6, '#f4bd5f');
        Drawscaleline(yuanxinx,yuanxiny,banjing-40,300,361,6, '#ef5469');

        Drawarc(yuanxinx,yuanxiny,banjing-62,12,21);

        Drawarc1(yuanxinx,yuanxiny,banjing-62,12,21);

        DrawText(yuanxinx,yuanxiny,banjing,180, '0', '#81d135');
        DrawText(yuanxinx,yuanxiny,banjing,120, '7', '#fdc159');
        DrawText(yuanxinx,yuanxiny,banjing,60, '14', '#fdc159');
        DrawText(yuanxinx,yuanxiny,banjing,0, '21', '#fb6376');

        //cans.scale(0.2, 0.2);
    }

    function load()
    {
        dashboard('can');
        dashboard('can1');
    }
 </script>
<body onload="load();" style="width:100%">
    <canvas id="can" width="414px" height="310px"></canvas>
    <canvas id="can1" width="414px" height="310px"></canvas>
</body>
</html>

posted @   chinacloudy  阅读(174)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天：
2014-10-20 开源：我的Android新闻客户端，速度快、体积小、支持离线阅读、操作简便、内容展现形式丰富多样、信息量大、功能全面 等（要代码的留下邮箱)
点击右上角即可分享
微信分享提示
AI IDE Trae