一.起因
现在工控也越来越多的使用web页面来显示电压,电流,温度,转速等物理量.本例使用js控制网页显示速度仪表.
二.代码
csharp
<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>三.显示效果
