用网页显示工控仪表

一.起因

现在工控也越来越多的使用web页面来显示电压,电流,温度,转速等物理量.本例使用js控制网页显示速度仪表.

二.代码

<html>
<head>
    <script type="text/javascript">
        var ctx;
        var px0;
        var movePoint={
            x0:0,
            x1:0
        };
      function init(){
          drawFace();
          movePoint.x0=30;
          movePoint.x1=30;
          px0=movePoint.x1;         
          drawPoint(movePoint);
      }
      function drawFace()
      {
        var c=document.getElementById("myCanvas");
        ctx=c.getContext("2d");
        ctx.lineWidth=3;
      
        ctx.strokeStyle="#FFFFFF";
        ctx.fillStyle="#FFFFFF";
        ctx.beginPath();
        ctx.arc(150,150,100,4/6*Math.PI,2/6*Math.PI);
        
        for (i=0;i<=300;i=i+10){
            x1=150+100*Math.cos((i+120)/180*Math.PI);
            y1=150+100*Math.sin((i+120)/180*Math.PI);
            ctx.moveTo(x1,y1);
            x=150+95*Math.cos((i+120)/180*Math.PI);
            y=150+95*Math.sin((i+120)/180*Math.PI);
            ctx.lineTo(x,y);
        }      
        ctx.font="11px 宋体";
        for (i=0;i<=300;i=i+20){
              x=143+85*Math.cos((i+120)/180*Math.PI);
              y=150+85*Math.sin((i+120)/180*Math.PI);
              ctx.fillText(i,x,y);
        } 
        ctx.stroke();
      }
      function drawPoint(movePoint){
          //抹旧针
        if (movePoint.x0!=movePoint.x1){   
            ctx.beginPath();
           ctx.strokeStyle="#000000";
            ctx.lineWidth=4;            
            var y=150+91*Math.sin((movePoint.x0+120)/180*Math.PI);
            var x=150+91*Math.cos((movePoint.x0+120)/180*Math.PI);
            ctx.moveTo(150,150);
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.beginPath();
            ctx.font="11px 宋体";
            ctx.fillStyle="#FFFFFF";
            ctx.strokeStyle="#FFFFFF";
            var i=Math.round( movePoint.x0/20);
            var iP1=i*20;
            x=143+85*Math.cos((iP1+120)/180*Math.PI);
            y=150+85*Math.sin((iP1+120)/180*Math.PI);
            ctx.fillText(iP1,x,y);
            ctx.stroke();           
        }        
        ctx.beginPath();
        ctx.strokeStyle="#FFFFFF";
        ctx.fillStyle="#FFFFFF";
        ctx.lineWidth=3;
        movePoint.x0=movePoint.x1;
        y=150+90*Math.sin((movePoint.x0+120)/180*Math.PI);
        x=150+90*Math.cos((movePoint.x0+120)/180*Math.PI);
        ctx.moveTo(150,150);
        ctx.lineTo(x,y);
        ctx.stroke();
    }
    function pointMove()
    {
        movePoint.x0=px0;
        movePoint.x1=px0;
        movePoint.x1+=5;
        if (movePoint.x1>296)
        {
            movePoint.x1=0;
        }
        drawPoint(movePoint);
        px0=movePoint.x1;
       
    }
    </script>
</head>
<body onload="init()">
  
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #130013;background-color:black">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <br/>
    <input id="b1" type="button" onclick="pointMove()" value="指针转"/>

</body>
</html>

三.显示效果