html怎样用画布画虚线,HTML5中canvas如何画虚线

虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke();

那么我们就可以利用context的基本方法来完成虚线的实现原理,如下:

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);展示效果如下:

原文：http://blog.csdn.net/u013412066/article/details/44306321