数学还勉强管用，用代码还能画个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 @ 2015-10-20 14:18  chinacloudy  阅读(166)  评论(0)  编辑  收藏  举报