【html5】HTML5中canvas怎样画虚线

在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢?

现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想要的虚线.

以下我们就能够依据上面的原理来实现虚线的画法.例如以下:

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);

展示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQxMjA2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">