Canvas画图 相位图

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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>

展开阅读全文

没有更多推荐了,返回首页