HTML5绘图

zqxz7hao

于 2016-05-04 22:29:25 发布

阅读量50

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zqxz7hao/article/details/51318733

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">

function draw(x,y,w,h) {
             var canvas = document.getElementById('test1')
             if (canvas == null)
                 return false;
             var context = canvas.getContext("2d");
            context.strokeRect(x,y,w,h);


            Line1 = new Line("port1","red","left");
            Line2 = new Line("port2","blue","left");
            Line3 = new Line("port3","green","left");
            //Line4 = new Line("port4","blue","left");
            //Line5 = new Line("port5","green","left");
            var LineArray = new Array();
            LineArray[0] = Line1;
            LineArray[1] = Line2;
            LineArray[2] = Line3;
            //LineArray[3] = Line4;
            //LineArray[4] = Line5;

            var lineSpacing = h/(LineArray.length+1);
            var lineSpacingAdd =0;
            var lineSpacingDivergenceAdd =0;
            for(var i =1;i<=LineArray.length;i++){
             lineSpacingDivergenceAdd = (LineArray.length - i)*4;

            if(i%2!=0){
                lineSpacingAdd = lineSpacingAdd +lineSpacing;
                drawline1(context,x,y+lineSpacingAdd,lineSpacingAdd,lineSpacingDivergenceAdd,LineArray[i-1]);
              }else{
                drawline2(context,x,y+h-lineSpacingAdd,lineSpacingAdd,lineSpacingDivergenceAdd,LineArray[i-1]);
              }
            }


            Line6 = new Line("port6","green","right");
            Line7 = new Line("port7","black","right");
            Line8 = new Line("port8","red","right");
            Line9 = new Line("port9","green","right");
            Line10 = new Line("port10","black","right");
            Line11= new Line("port11","red","right");
            Line12 = new Line("port12","green","right");
            Line13 = new Line("port13","black","right");
            /**Line14 = new Line("port14","red","right");
            Line15 = new Line("port15","green","right");
            Line16 = new Line("port16","black","right");
            Line17= new Line("port17","red","right");

            Line18 = new Line("port18","green","right");
            Line19 = new Line("port19","black","right");
            Line20 = new Line("port20","red","right");
            Line21 = new Line("port21","green","right");
            Line22 = new Line("port22","black","right");
            Line23= new Line("port23","red","right");
            Line24 = new Line("port24","green","right");
            Line25 = new Line("port25","black","right");
            Line26 = new Line("port26","red","right");
            Line27 = new Line("port27","green","right");
            Line28 = new Line("port28","black","right");
            Line29 = new Line("port29","red","right");

            Line30 = new Line("port30","green","right");
            Line31 = new Line("port31","black","right");
            Line32 = new Line("port32","red","right");
            Line33 = new Line("port33","green","right");
            Line34 = new Line("port34","black","right");
            Line35= new Line("port35","red","right");
            Line36 = new Line("port36","green","right");
            Line37 = new Line("port37","black","right");
            Line38 = new Line("port38","red","right");
            Line39 = new Line("port39","green","right");
            Line40 = new Line("port40","black","right");
            Line41= new Line("port41","red","right");

            Line42 = new Line("port42","green","right");
            Line43 = new Line("port43","black","right");
            Line44 = new Line("port44","red","right");
            Line45 = new Line("port45","green","right");
            Line46 = new Line("port46","black","right");
            Line47= new Line("port47","red","right");
            Line48 = new Line("port48","green","right");
            Line49 = new Line("port49","black","right");
            Line50 = new Line("port50","red","right");
            Line51 = new Line("port51","green","right");
            Line52 = new Line("port52","black","right");
            Line53 = new Line("port53","red","right");**/

            var LineArray2 = new Array();
            LineArray2[0] = Line6;
            LineArray2[1] = Line7;
            LineArray2[2] = Line8;
            LineArray2[3] = Line9;
            LineArray2[4] = Line10;
            LineArray2[5] = Line11;
            LineArray2[6] = Line12;
            LineArray2[7] = Line13;
            /**LineArray2[8] = Line14;
            LineArray2[9] = Line15;
            LineArray2[10] = Line16;
            LineArray2[11] = Line17;

            LineArray2[12] = Line18;
            LineArray2[13] = Line19;
            LineArray2[14] = Line20;
            LineArray2[15] = Line21;
            LineArray2[16] = Line22;
            LineArray2[17] = Line23;
            LineArray2[18] = Line24;
            LineArray2[19] = Line25;
            LineArray2[20] = Line26;
            LineArray2[21] = Line27;
            LineArray2[22] = Line28;
            LineArray2[23] = Line29;

             LineArray2[24] = Line30;
            LineArray2[25] = Line31;
            LineArray2[26] = Line32;
            LineArray2[27] = Line33;
            LineArray2[28] = Line34;
            LineArray2[29] = Line35;
            LineArray2[30] = Line36;
            LineArray2[31] = Line37;
            LineArray2[32] = Line38;
            LineArray2[33] = Line39;
            LineArray2[34] = Line40;
            LineArray2[35] = Line41;

            LineArray2[36] = Line42;
            LineArray2[37] = Line43;
            LineArray2[38] = Line44;
            LineArray2[39] = Line45;
            LineArray2[40] = Line46;
            LineArray2[41] = Line47;
            LineArray2[42] = Line48;
            LineArray2[43] = Line49;
            LineArray2[44] = Line50;
            LineArray2[45] = Line51;
            LineArray2[46] = Line52;
            LineArray2[47] = Line53;**/

            var lineSpacing2 = h/(LineArray2.length+1);
            var lineSpacingAdd2 =0;
            var lineSpacingDivergenceAdd2 =0;
            for(var i =1;i<=LineArray2.length;i++){
            lineSpacingDivergenceAdd2 = (LineArray2.length - i)*4;
            if(i%2!=0){
                lineSpacingAdd2 = lineSpacingAdd2 +lineSpacing2;
                drawline3(context,x,y+lineSpacingAdd2,w,lineSpacingAdd2,lineSpacingDivergenceAdd2,LineArray2[i-1]);
              }else{
                drawline4(context,x,y+h-lineSpacingAdd2,w,lineSpacingAdd2,lineSpacingDivergenceAdd2,LineArray2[i-1]);
              }
            }

         }


function drawline1(context,x,y,lineSpacing,lineSpacingDivergenceAdd,lineEntity) {
    context.beginPath();
    context.strokeStyle = lineEntity.color;
    context.strokeText(lineEntity.port, x-150-lineSpacing*5-30, y-20-lineSpacingDivergenceAdd);
    context.moveTo(x-150-lineSpacing*5, y-20-lineSpacingDivergenceAdd);
    context.lineTo(x-50-lineSpacing, y-20-lineSpacingDivergenceAdd);
    context.lineTo(x-50-lineSpacing, y);
    context.lineTo(x, y);
    context.stroke();
}

function drawline2(context,x,y,lineSpacing,lineSpacingDivergenceAdd,lineEntity) {
    context.beginPath();
    context.strokeStyle = lineEntity.color;
    context.strokeText(lineEntity.port, x-150-lineSpacing*5-30, y+20+lineSpacingDivergenceAdd);
    context.moveTo(x-150-lineSpacing*5, y+20+lineSpacingDivergenceAdd);
    context.lineTo(x-50-lineSpacing, y+20+lineSpacingDivergenceAdd);
    context.lineTo(x-50-lineSpacing, y);
    context.lineTo(x, y);
    context.stroke();
}

function drawline3(context,x,y,w,lineSpacing,lineSpacingDivergenceAdd,lineEntity) {
    context.beginPath();
    context.strokeStyle = lineEntity.color;
    context.moveTo(x+w, y);
    context.lineTo(x+w+50+lineSpacing, y);
    context.lineTo(x+w+50+lineSpacing, y-20-lineSpacingDivergenceAdd);
    context.lineTo(x+w+150+lineSpacing*5, y-20-lineSpacingDivergenceAdd);
    context.strokeText(lineEntity.port, x+w+150+lineSpacing*5+5, y-20-lineSpacingDivergenceAdd);
    context.stroke();
}

function drawline4(context,x,y,w,lineSpacing,lineSpacingDivergenceAdd,lineEntity) {
    context.beginPath();
    context.strokeStyle = lineEntity.color;
    context.moveTo(x+w, y);
    context.lineTo(x+w+50+lineSpacing, y);
    context.lineTo(x+w+50+lineSpacing, y+20+lineSpacingDivergenceAdd);
    context.lineTo(x+w+150+lineSpacing*5, y+20+lineSpacingDivergenceAdd);
    context.strokeText(lineEntity.port, x+w+150+lineSpacing*5+5, y+20+lineSpacingDivergenceAdd);
    context.stroke();
}

function Line(port,color,direction)
   {
    this.port=port,
    this.color=color,
    this.direction=direction
   }

</script>
</head>
<body>

<canvas id="test1" width="1200" height="700" style="border: 1px solid ;">ÄãµÄä¯ÀÀÆ÷²»Ö§³Ö <canvas>±êÇ©£¬ÇëÊ¹ÓÃ Chrome ä¯ÀÀÆ÷ »òÕß FireFox ä¯ÀÀÆ÷</canvas>
<input type="button" οnclick="draw(300, 320, 150, 40);"/>

</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。