精华内容
下载资源
问答
  • html5绘图

    2014-03-31 10:52:00
    html5绘图这是我在绘图过程中遇到的问题,求助高手帮忙啊。。。...

    html5绘图

    这是我在绘图过程中遇到的问题,求助高手帮忙啊。。。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@taglib prefix="s" uri="/struts-tags" %>
    <!DOCTYPE html>
    <html>
      <head>
        <base href="<%=basePath%>">
         
        <title>My JSP 'index.jsp' starting page</title>
        <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="<%=basePath%>js/my.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //var ll = "<%=request.getParameter("choiceFileName")%>";
        //var urll = "<%=basePath%>parseXmlAction.action?choiceFileName="+ll;
        //alert(urll);
        var transLength = $(".trans").length;
        var arcLength = $(".arc").length;
        var placeLength = $(".place").length;
        var xP = new Array(placeLength);
        var yP = new Array(placeLength);
        var wP = new Array(placeLength);
        var hP = new Array(placeLength);
         
        var xT = new Array(transLength);
        var yT = new Array(transLength);
        var wT = new Array(transLength);
        var hT = new Array(transLength);
        for(var i=0; i<placeLength; i++){
            xP[i] = $(".place:eq("+i+")").find(".x").text();
            yP[i] = $(".place:eq("+i+")").find(".y").text();
            wP[i] = $(".place:eq("+i+")").find(".w").text();
            hP[i] = $(".place:eq("+i+")").find(".h").text();
        }
        for(var i=0; i<transLength; i++){
            xT[i] = $(".place:eq("+i+")").find(".x").text();
            yT[i] = $(".place:eq("+i+")").find(".y").text();
            wT[i] = $(".place:eq("+i+")").find(".w").text();
            hT[i] = $(".place:eq("+i+")").find(".h").text();
        }
         
        //第一步,获得所有的元素个数
     
        $("#showModel").click(function(){
            DrawTrans(cxt,0,0,50,50);
            //DrawPlace(cxt,200.0,200.0,60.0,40.0);
            for(var j=0; j<placeLength; j++){
                //alert(xP[j]+" "+yP[j]+" "+wP[j]+" "+hP[j]);
                DrawPlace(cxt,xP[j],yP[j],wP[j],hP[j]);
            }
             
            for(var i=0; i<transLength; i++){
                 
                DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
            }
     
            //画箭头
            var a1=new window.mapleque.arrow();
            a1.set({x:350,y:300},{x:200,y:200});
            a1.paint(cxt);
             
        });
         
         
    });
    </script>
      </head>
      <body>
    <input type="button" id="showModel" value="生成模型"/>
    <br/>
    <!-- 
    <table>
        <tr>
            <td>
                <canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
            </td>
            <td>
                <canvas id="newCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
            </td>
        </tr>
    </table>
    -->
                <canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
    <hr/>
    <table id="table"></table>
    <div  id="div" >
            <s:iterator value="hashMap.keySet()" id="message"  status="st"
                 
                <s:iterator value="hashMap.get(#message)" status="second"
                    <ul class="<s:property value="#message"/>"> <s:property value="#message"/>
                    <li class="id"><s:property value="id"/></li>
                    <li class="text"><s:property value="text"/></li>
                    <li class="x"><s:property value="x"/></li>
                    <li class="y"><s:property value="y"/></li>
                    <li class="w"><s:property value="w"/></li>
                    <li class="h"><s:property value="h"/></li>
                    <li class="dataType"><s:property value="dataType"/></li>
                    <li class="placeId"><s:property value="placeId"/></li>
                    <li class="transId"><s:property value="transId"/></li>
                    <li class="type"><s:property value="type"/></li>
                    <li class="initmark"><s:property value="initmark"/></li>
                    <li class="transNextId"><s:property value="transNextId"/></li>
                    <li class="placeNextId"><s:property value="placeNextId"/></li>
                </ul>
                </s:iterator>
                  
        </s:iterator>
      </div>
     
    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
     
    function DrawTrans(cxt,x,y,a,b){
        //var cT=document.getElementById("myCanvas");
        //var cxtT=cT.getContext("2d");
        cxt.save();
        cxt.beginPath();
        cxt.strokeStyle = "#0000FF";
        cxt.strokeRect(x,y,a,b);
        cxt.restore();
    }
    function DrawPlace(context, x, y, a, b)
    {
       //max是等于1除以长轴值a和b中的较大者
       //i每次循环增加1/max,表示度数的增加
       //这样可以使得每次循环所绘制的路径(弧线)接近1像素
       var step = (a > b) ? 1 / a : 1 / b;
       context.beginPath();
       context.strokeStyle = "#0000FF";
       context.moveTo(x + a, y); //从椭圆的左端点开始绘制
       for (var i = 0; i < 2 * Math.PI; i += step)
       {
          //参数方程为x = a * cos(i), y = b * sin(i),
          //参数为i,表示度数(弧度)
          context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
       }
       //context.closePath();
       context.stroke();
    }
    function DrawArc(cont, ax,ay,bx,by){
         
    }
     
    //DrawPlace(40, 40);
    //DrawTrans(30,80);
     
    </script>
     
     
       
      </body>
    </html>

    画图显示的时候就是不对,直接调用画图函数的时候,是对的,但是加到for循环中就出现绘制偏差,不知道怎么回事啊。。

    下面是页面源码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    <!DOCTYPE html>
    <html>
      <head>
        <base href="http://localhost:8080/parsecpn/">
         
        <title>My JSP 'index.jsp' starting page</title>
        <script type="text/javascript" src="http://localhost:8080/parsecpn/js/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="http://localhost:8080/parsecpn/js/my.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //var ll = "3.cpn";
        //alert(urll);
        var transLength = $(".trans").length;
        var arcLength = $(".arc").length;
        var placeLength = $(".place").length;
        var xP = new Array(placeLength);
        var yP = new Array(placeLength);
        var wP = new Array(placeLength);
        var hP = new Array(placeLength);
         
        var xT = new Array(transLength);
        var yT = new Array(transLength);
        var wT = new Array(transLength);
        var hT = new Array(transLength);
        for(var i=0; i<placeLength; i++){
            xP[i] = $(".place:eq("+i+")").find(".x").text();
            yP[i] = $(".place:eq("+i+")").find(".y").text();
            wP[i] = $(".place:eq("+i+")").find(".w").text();
            hP[i] = $(".place:eq("+i+")").find(".h").text();
        }
        for(var i=0; i<transLength; i++){
            xT[i] = $(".place:eq("+i+")").find(".x").text();
            yT[i] = $(".place:eq("+i+")").find(".y").text();
            wT[i] = $(".place:eq("+i+")").find(".w").text();
            hT[i] = $(".place:eq("+i+")").find(".h").text();
        }
         
        //第一步,获得所有的元素个数
     
        $("#showModel").click(function(){
            DrawTrans(cxt,0,0,50,50);
            //DrawPlace(cxt,200.0,200.0,60.0,40.0);
            for(var j=0; j<placeLength; j++){
                //alert(xP[j]+" "+yP[j]+" "+wP[j]+" "+hP[j]);
                DrawPlace(cxt,xP[j],yP[j],wP[j],hP[j]);
            }
             
            for(var i=0; i<transLength; i++){
                 
                DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
            }
            for(var i=0; i<transLength; i++){
                 
                DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
            }
            //画箭头
            var a1=new window.mapleque.arrow();
            a1.set({x:350,y:300},{x:200,y:200});
            a1.paint(cxt);
             
        });
         
         
    });
    </script>
      </head>
      <body>
    <input type="button" id="showModel" value="生成模型"/>
    <br/>
    <!-- 
    <table>
        <tr>
            <td>
                <canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
            </td>
            <td>
                <canvas id="newCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
            </td>
        </tr>
    </table>
    -->
                <canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
                    Your browser does not support the canvas element.
                </canvas>
    <hr/>
    <table id="table"></table>
    <div  id="div" >
               
                 
                   
                    <ul class="trans"> trans
                    <li class="id">1419094240</li>
                    <li class="text">int</li>
                    <li class="x">326.0</li>
                    <li class="y">200.0</li>
                    <li class="w">60.0</li>
                    <li class="h">40.0</li>
                    <li class="dataType"></li>
                    <li class="placeId"></li>
                    <li class="transId"></li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId">0, 1419094300, 0, 0</li>
                    <li class="placeNextId"></li>
                </ul>
                   
                    <ul class="trans"> trans
                    <li class="id">1419094720</li>
                    <li class="text">c</li>
                    <li class="x">494.0</li>
                    <li class="y">301.0</li>
                    <li class="w">60.0</li>
                    <li class="h">40.0</li>
                    <li class="dataType"></li>
                    <li class="placeId"></li>
                    <li class="transId"></li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId">0, 0, 0, 1419094819</li>
                    <li class="placeNextId"></li>
                </ul>
                  
                  
           
                 
                   
                    <ul class="arc"> arc
                    <li class="id">1419094280</li>
                    <li class="text"></li>
                    <li class="x"></li>
                    <li class="y"></li>
                    <li class="w"></li>
                    <li class="h"></li>
                    <li class="dataType">i</li>
                    <li class="placeId">1419094226</li>
                    <li class="transId">1419094240</li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId"></li>
                </ul>
                   
                    <ul class="arc"> arc
                    <li class="id">1419094300</li>
                    <li class="text"></li>
                    <li class="x"></li>
                    <li class="y"></li>
                    <li class="w"></li>
                    <li class="h"></li>
                    <li class="dataType">i</li>
                    <li class="placeId">1419094260</li>
                    <li class="transId">1419094240</li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId"></li>
                </ul>
                   
                    <ul class="arc"> arc
                    <li class="id">1419094735</li>
                    <li class="text"></li>
                    <li class="x"></li>
                    <li class="y"></li>
                    <li class="w"></li>
                    <li class="h"></li>
                    <li class="dataType">i</li>
                    <li class="placeId">1419094260</li>
                    <li class="transId">1419094720</li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId"></li>
                </ul>
                   
                    <ul class="arc"> arc
                    <li class="id">1419094819</li>
                    <li class="text"></li>
                    <li class="x"></li>
                    <li class="y"></li>
                    <li class="w"></li>
                    <li class="h"></li>
                    <li class="dataType">i</li>
                    <li class="placeId">1419094226</li>
                    <li class="transId">1419094720</li>
                    <li class="type"></li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId"></li>
                </ul>
                  
                  
           
                 
                   
                    <ul class="place"> place
                    <li class="id">1419094226</li>
                    <li class="text">a</li>
                    <li class="x">200.0</li>
                    <li class="y">200.0</li>
                    <li class="w">60.0</li>
                    <li class="h">40.0</li>
                    <li class="dataType"></li>
                    <li class="placeId"></li>
                    <li class="transId"></li>
                    <li class="type">INT</li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId">1419094280, 0, 0, 0</li>
                </ul>
                   
                    <ul class="place"> place
                    <li class="id">1419094260</li>
                    <li class="text">b</li>
                    <li class="x">494.0</li>
                    <li class="y">200.0</li>
                    <li class="w">60.0</li>
                    <li class="h">40.0</li>
                    <li class="dataType"></li>
                    <li class="placeId"></li>
                    <li class="transId"></li>
                    <li class="type">INT</li>
                    <li class="initmark"></li>
                    <li class="transNextId"></li>
                    <li class="placeNextId">0, 0, 1419094735, 0</li>
                </ul>
                  
                  
          
      </div>
     
    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
     
    function DrawTrans(cxt,x,y,a,b){
        //var cT=document.getElementById("myCanvas");
        //var cxtT=cT.getContext("2d");
        cxt.save();
        cxt.beginPath();
        cxt.strokeStyle = "#0000FF";
        cxt.strokeRect(x,y,a,b);
        cxt.restore();
    }
    function DrawPlace(context, x, y, a, b)
    {
       //max是等于1除以长轴值a和b中的较大者
       //i每次循环增加1/max,表示度数的增加
       //这样可以使得每次循环所绘制的路径(弧线)接近1像素
       var step = (a > b) ? 1 / a : 1 / b;
       context.beginPath();
       context.strokeStyle = "#0000FF";
       context.moveTo(x + a, y); //从椭圆的左端点开始绘制
       for (var i = 0; i < 2 * Math.PI; i += step)
       {
          //参数方程为x = a * cos(i), y = b * sin(i),
          //参数为i,表示度数(弧度)
          context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
       }
       //context.closePath();
       context.stroke();
    }
    function DrawArc(cont, ax,ay,bx,by){
         
    }
     
    //DrawPlace(40, 40);
    //DrawTrans(30,80);
     
    </script>
     
     
       
      </body>
    </html>

    可以直接复制到jsp页面中直接使用那。
    生成的图是这个样子,很明显两个矩形的框位置就不对!
    311052149222811.png






    转载于:https://www.cnblogs.com/wang3680/p/ebbd731ef1f5f798eb97708d16197c96.html

    展开全文
  • html5 绘图

    2013-05-18 02:28:00
    前端html: <!DOCTYPE html> <html> <head> <meta charset="utf-8">...html5绘图</title> </head> <body> <canvas id="cansp" height="60...

    前端html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>html5绘图</title>
    </head>
    <body>
       <canvas id="cansp" height="600px" width="500px" style="border: 1px solid red;"></canvas>
    </body>
    </html>

    script:

     <script type="text/javascript">
            var can=document.getElementById("cansp");
            var ctxt=can.getContext("2d");
    
            //画直线
           ctxt.moveTo(20,20);
           ctxt.lineTo(20,100);
           ctxt.stroke();
    
           //画填充三角形 (路劲)
            ctxt.beginPath();//开始新路劲 因为上面的ctxt定位在20,20 否则会重合
            ctxt.moveTo(40,20); //移动到 40,20 (起点)
            ctxt.lineTo(40,100);//下一个点
            ctxt.lineTo(80,100);//下一个点
            ctxt.closePath(); //闭合路劲
            //ctxt.fill();//填充
            ctxt.stroke();//画线  (相对 file空心)
    
           //画出矩形可以不要路劲
            ctxt.strokeRect(100,20,70,80);
    
            //实心矩形
            ctxt.fillStyle="red";
            ctxt.fillRect(200,20,70,50);
    
           //圆形
            ctxt.beginPath();
            ctxt.arc(300,50,20,0,360,true);
            ctxt.closePath();
            ctxt.stroke();
    
           //实心
            ctxt.beginPath();
            ctxt.fillStyle="yellow";
            ctxt.arc(350,50,20,0,360,true);
            ctxt.closePath();
            ctxt.fill();
    
           //画图像(第一创建image 对象)
           var img=new Image();
           img.src="img/a.jpg";
           img.onload=function(){
            ctxt.drawImage(img,20,120,254,356);
           };
    
           //在画布上画字
            var text="伊丽莎白一世";
            ctxt.fillStyle="#0000FF";
            ctxt.font="30px 宋体";
           ctxt.fillText(text,300,150);
       </script>

    图片:

    转载于:https://www.cnblogs.com/y112102/archive/2013/05/18/3084866.html

    展开全文
  • HTML5绘图canvas

    2017-03-21 22:22:59
    HTML5绘图
  • HTML5绘图

    2016-05-04 22:29:25
     //Line5 = new Line("port5","green","left");  var LineArray = new Array();  LineArray[0] = Line1;  LineArray[1] = Line2;  LineArray[2] = Line3;  //LineArray[3] = Line4;  //LineArray...

    <!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 ;">ÄãµÄä¯ÀÀÆ÷²»Ö§³Ö &lt;canvas&gt;±êÇ©£¬ÇëʹÓà Chrome ä¯ÀÀÆ÷ »òÕß FireFox ä¯ÀÀÆ÷</canvas>
    <input type="button"  οnclick="draw(300, 320, 150, 40);"/>

    </body>
    </html>

    展开全文
  • html5绘图jtopo示例

    2017-10-30 15:34:30
    html5绘图jtopo范例 绘制topo图工具的html5版本 打包成js
  • html5绘图Canvas线条动画特效 html5绘图Canvas线条动画特效
  • HTML5绘图源码

    2013-12-12 09:31:02
    HTML5绘图源码,适合初学者,内容详尽。
  • HTML5绘图函数详解

    2012-06-18 17:46:50
    HTML5绘图函数详解
  • html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力和电信的叫法
  • html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力和电信的叫法
  • html5绘图demo

    2016-07-11 19:15:27
    android使用html5离线绘图
  • html5绘图效果简单绘制图形线条类似百度贴吧涂鸦效果
  • HTML5 绘图日记

    2011-12-31 17:08:49
    使用HTML5 CANVAS 离线存储 技术构建的绘图日记本。可在日记中绘图,拖放图片。可保存到本地离线存储。
  • [HTML5 绘图] 电子书 非扫描版, 和 随书 demo 源代码 [HTML5 绘图] 电子书 非扫描版, 和 随书 demo 源代码
  • HTML5绘图之文字旋转

    千次阅读 2015-02-12 21:56:32
    HTML5绘图之文字旋转在GDI/GDI+中文字旋转是一件比较容易的事情,HTML5的Canvas中的旋转与GDI/GDI+中的旋转稍微有点差异。 canvas的rotate是针对画布进行的,也可以理解为OPENGS的状态机,对于画布来讲是全局的。...

    HTML5绘图之文字旋转

    在GDI/GDI+中文字旋转是一件比较容易的事情,HTML5的Canvas中的旋转与GDI/GDI+中的旋转稍微有点差异,先看一个图:
    这里写图片描述

    文字旋转的示例代码

    ctx.beginPath();
    
    ctx.fillStyle = "#000000";
    
    ctx.font = "52pt Calibri";
    ctx.textAlign = "center";
    ctx.fillText(this.end, endX, endY);
    
    ctx.save();
    ctx.translate(endX, endY);
    ctx.rotate(Math.PI/6);
    ctx.fillText("文字2", 0, 0);
    ctx.restore();

    代码说明

    canvas的rotate是针对画布进行的,也可以理解为OPENGS的状态机,对于画布来讲是全局的。所以要想在指定位置将文字旋转显示,那么就先将画面的原点移动到该位置,然后旋转画布,最后在(0,0)位置输出文字,记得一定是(0,0)位置哦。

    展开全文
  • HTML5绘图总结详解

    2018-05-30 22:24:00
    HTML5绘图基础 • 在HTML5以前的时代,web前端开发者无法在HTML页面上动态地绘制图片• HTM5新增了一个<canvas../>元素,相当于一个画布,可以获得一个CanvasRenderingContext2D对象• ...
  • DeviantArt 出品的 HTML5 绘图程序

    万次阅读 2010-08-12 07:43:00
    DeviantArt 是一个著名的,汇集了大量怪诞艺术家的非主流艺术作品展示网站,最近,他们推出了一个完全基于 HTML5绘图程序 Muro。这个几乎支持所有现代浏览器,无需 Flash 和任何插件的绘图工具是作者见过的最好的...
  • HTML5系列:HTML5绘图

    2015-04-19 14:51:00
     canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形。  在页面中使用canvas元素绘制图形需要经过的三个步骤:  步骤一 使用canvas元素创建一个画布区域,并获取该元素。  步骤二 通过获取的canvas...
  • HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形。 注意: 默认情况下 元素没有边框和内容。 <canvas id="myCanvas" style="border:1px solid;" ...
  • HTML5绘图 源代码

    2011-06-09 14:39:23
    No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already. This book gets you started with the Canvas element, perhaps ...
  • canvas绘图API1.1 Canvas的Context对象要使用Canvas来绘制图形必须在页面中添加... 请使用支持HTML5的浏览器查看本实例 只有上面的标签,只能是创建好了一个画布,其中width和height属性就是设置画布的大小。Id属

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,450
精华内容 1,380
关键字:

html5绘图