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