HTML5中canvas怎么画虚线_随笔

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>

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

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

</style> </head>

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

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

</table> </body>

</html>

欢迎分享，转载请注明来源：内存溢出

HTML5中canvas怎么画虚线