zoukankan html css js c++ java

没事用html5 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">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; 800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        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 = $$('can');
        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 Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse)
    {
        var can = $$('can');
        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 = $$('can');
        var cans = can.getContext('2d');
        cans.font = "bold 10px Arial";
        cans.strokeStyle = g;
        cans.fillStyle = g;
        x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0);
        if (jiaodu>90)
            x1 = x1 +10;
        else
            x1 = x1-18;
        y1   =  yuanxiny - banjing *Math.sin((jiaodu * 3.14)/180.0);
        cans.fillText(text,x1,y1);
    }

    function load()
    {
        var can = $$('can');
        var banjing = (can.width/2);
        var yuanxinx = can.width/2;
        var yuanxiny = can.height/2;
        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');

        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 pageLoad1(){
        var myCanvas = document.getElementById("can");
        var context = myCanvas.getContext("2d");
        var wise = true;

        context.lineWidth = 3;
        context.strokeStyle = "blue";
        context.fillStyle = "red";
        for(var i=1;i<5;i++)
        {
            for(var j=1;j<4;j++)
            {
                context.beginPath();
                context.arc(j*100,i*100,40,0,j*2/3*Math.PI,wise);
                if(1 == i||3 == i)
                    context.stroke();
                else
                    context.fill();
                wise = !wise;
            }
        }
    }
 </script>
<body onload="load();">
    <canvas id="can" width="280px" height="480px"></canvas>
</body>
</html>

查看全文

相关阅读:
ＵＶＭ训练场
 无法解析具体reference那个同名文件
 Verdi技巧
 verilog disable 用法（易错！）
Unicode 和 UTF-8 有何区别？
gcc编译过程简述
 js对象中什么是可枚举性(enumerable)？
JSON.stringify 语法实例讲解
 ECMAScript5 Object的新属性方法
 Can someone explain Webpack's CommonsChunkPlugin

原文地址：https://www.cnblogs.com/bdccloudy/p/7665272.html