Canvas画图相位图

最新推荐文章于 2023-10-25 22:34:52 发布

BUG_Hello

最新推荐文章于 2023-10-25 22:34:52 发布

阅读量1.1k

点赞数

文章标签： Canvas

本文链接：https://blog.csdn.net/shuiailing/article/details/80074206

版权

<html>
<head></head>
<body>
<canvas id="drawing" height="200" style="">A Drawing of something</canvas>
</body>
<script type="text/javascript">

function initAngle(json) {
var canvas = document.getElementById("drawing");
var vr=99;
var ir=60;
var v1Length=99;
var i1Length=60;
var x0=100;
var y0=100;
var jsonObj=JSON.parse(json);//json.parseJSON();
if(jsonObj){
var vUom="V";
var iUom="A";
var angleUom="°";
var v1=jsonObj.v1.toFixed(2);
var v2=jsonObj.v2.toFixed(2);
var v3=jsonObj.v3.toFixed(2);
var i1=jsonObj.i1.toFixed(2);
var i2=jsonObj.i2.toFixed(2);
var i3=jsonObj.i3.toFixed(2);
var i1v1=jsonObj.i1v1.toFixed(2);
var i2v2=jsonObj.i2v2.toFixed(2);
var i3v3=jsonObj.i3v3.toFixed(2);
var v1v2=jsonObj.v1v2.toFixed(2);
var v1v3=jsonObj.v1v3.toFixed(2);
var i2v1=parseFloat(i2v2)+parseFloat(v1v2);
var i3v1=parseFloat(i3v3)+parseFloat(v1v3);
if (canvas.getContext) {
var cxt=canvas.getContext("2d");
clearCanvas();
//电压圆
cxt.beginPath();
cxt.arc(x0,y0,vr,0,2*Math.PI,false);
cxt.lineWidth=1;
cxt.strokeStyle="green";
cxt.stroke();//画空心圆
cxt.closePath();
//电流圆
cxt.beginPath();
cxt.arc(x0,y0,ir,0,2*Math.PI,false);
cxt.strokeStyle="#e4c0c0";
cxt.stroke();
cxt.closePath();

//V1线
cxt.beginPath();
cxt.moveTo(x0,y0);
cxt.lineTo(x0+vr,y0);
cxt.translate(x0,0);
cxt.font="bold 14px Arial";
cxt.textAlign="center";
cxt.textBaseline="middle";//文本的基线
cxt.fillText("V1",x0,y0);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
//V2线
drawLineV1(v1,v2,v1v2,vr,0,y0,cxt,"V2");
//V3线
drawLineV1(v1,v3,v1v3,vr,0,y0,cxt,"V3");
//I1线
drawLineI1(i1,i1v1,ir,0,y0,cxt,"I1");
//I2线
var i2R=((i2/i1)*ir);
drawLineI1(i2,i2v1,i2R,0,y0,cxt,"I2");
//I3线
var i3R=((i3/i1)*ir);
drawLineI1(i3,i3v1,i3R,0,y0,cxt,"I3");
}
}

}

function clearCanvas()
{
var c=document.getElementById("drawing");
var cxt=c.getContext("2d");
c.height=c.height;
}
//电压V2 V3线
function drawLineV1(v1,v2,angle,r,x,y,cxt,text){
var v2x;
var v2y;
var vr=(v2/v1)*r;
var vx=vr*Math.cos(2*Math.PI*angle/360);
if(angle>90&&angle<270){
v2x=x+vx;
}else{
v2x=x+vx;
}
var vy=vr*Math.sin(2*Math.PI*angle/360);
v2y=y-vy;
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(v2x,v2y);
//cxt.translate(x,y);
cxt.font="bold 14px Arial";
cxt.textAlign="center";
cxt.textBaseline="middle";//文本的基线
cxt.fillText(text,v2x,v2y);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
}

//电流I1 I2 I3线
function drawLineI1(i1,angle,r,x,y,cxt,text){
var ix;
var iy;
var ix2=r*Math.cos(2*Math.PI*angle/360);
if(angle>90&&angle<270){
ix=x+ix2;
}else{
ix=x+ix2;
}
var iy2=r*Math.sin(2*Math.PI*angle/360);
iy=y-iy2;
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(ix,iy);
//cxt.translate(x,y);
cxt.font="bold 14px Arial";
cxt.textAlign="center";
cxt.textBaseline="middle";//文本的基线
cxt.fillText(text,ix,iy);
cxt.strokeStyle="blue";
cxt.stroke();
cxt.closePath();
}

initAngle('{"base": null,"v1": 221.70000000000002,"v2": 222.8,"v3": 220.3,"i1": 1.8780000000000001,"i2": 1.96,"i3": 1.159,"i1v1": 1.1400000000000001,"i2v2": 1.1400000000000001,"i3v3": 1.4000000000000001,"v1v2": 119.72,"v1v3": 239.94}');
</script>
</html>