HTML5中canvas如何画虚线
浏览数：377 /
时间：2015年06月09日
虚线也可以看成是一段段的实线组成的,而实线是利用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);
展示效果如下:
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
