<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>
