HTML5中canvas怎么画虚线

html-css05

HTML5中canvas怎么画虚线,第1张

var context = document.getElementById('canvas').getContext('2d')  

  

//求斜边长度  

function getBeveling(x,y)  

{  

    return Math.sqrt(Math.pow(x,2)+Math.pow(y,2))  

}  

  

function drawDashLine(context,x1,y1,x2,y2,dashLen)  

{  

    dashLen = dashLen === undefined ? 5 : dashLen  

    //得到斜边的总长度  

    var beveling = getBeveling(x2-x1,y2-y1)  

    //计算有多少个线段  

    var num = Math.floor(beveling/dashLen)  

      

    for(var i = 0  i < num i++)  

    {  

        context[i%2 == 0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i)  

    }  

    context.stroke()  

}  

  

drawDashLine(context,50,50,300,180,5)

<!DOCTYPE html> <html>

<head> <meta charset="utf-8" />

<title>html边框虚线演示 www.pcss5.com</title> <style>

.bor{border:1px dashed #F00width:300pxheight:60pxmargin-top:10px} span{display:block}/*css注释说明：让span形成块*/

</style> </head>

<body> <p class="bor">p盒子</p>

<span class="bor">span盒子</span> <ul class="bor">

<li>ul li列表</li> <li>ul li列表</li>

</ul> <table class="bor">

<tr> <td>表格</td>

<td>表格2</td> </tr>

<tr> <td>数据</td>

<td>数据2</td> </tr>

</table> </body>

</html>