一.起因
现在工控也越来越多的使用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>
三.显示效果
