用html5實作畫虛線效果碼

html5已經出來好長一段時間了，只是最近才開始接觸到它，html5提供了很多內建的函數可以實現很多功能，例如 畫線段、畫矩形、畫圓、畫弧等。但html5沒有提供畫虛線的功能，如果想實現在canvas上畫曲線就要發費一點功夫了。

下面提供兩種方式實作畫虛線的功能：

方法一就是要單獨寫一個函數，當想畫曲線的時候就呼叫這個曲線就行了。

function drawDashLine(context , x, y, x2, y2, dashLength)
{
	
	<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="white-space:pre">	</span>dashLength=dashLength === <span style="color:#660e7a;"><strong>undefined</strong></span>?<span style="color:#0000ff;">5</span>:dashLength;
<span style="color:#000080;"><strong><span style="white-space:pre">	</span>var </strong></span><span style="color:#458383;">deltaX </span>= x2-x;
<span style="color:#000080;"><strong><span style="white-space:pre">	</span>var </strong></span><span style="color:#458383;">deltaY </span>= y2-y;
<span style="color:#000080;"><strong><span style="white-space:pre">	</span>var </strong></span><span style="color:#458383;">numDashs </span>= <span style="color:#660e7a;"><strong>Math</strong></span>.<span style="color:#7a7a43;">floor</span>(<span style="color:#660e7a;"><strong>Math</strong></span>.<span style="color:#7a7a43;">sqrt</span>(<span style="color:#458383;">deltaX</span>*<span style="color:#458383;">deltaX</span>+<span style="color:#458383;">deltaY</span>*<span style="color:#458383;">deltaY</span>)/dashLength);
<span style="white-space:pre">	</span>
<span style="color:#000080;"><strong><span style="white-space:pre">	</span>for</strong></span>(<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">i </span>=<span style="color:#0000ff;">0 </span>;<span style="color:#458383;">i</span><<span style="color:#458383;">numDashs</span>;<span style="color:#458383;">i</span>++)
<span style="white-space:pre">	</span>{
   <span style="white-space:pre">		</span>context[<span style="color:#458383;">i</span>%<span style="color:#0000ff;">2</span>===<span style="color:#0000ff;">0</span>?<span style="color:#008000;"><strong>&#39;moveTo&#39;</strong></span>:<span style="color:#008000;"><strong>&#39;lineTo&#39;</strong></span>](x+(<span style="color:#458383;">deltaX</span>/<span style="color:#458383;">numDashs</span>)*<span style="color:#458383;">i</span>,y+(<span style="color:#458383;">deltaY</span>/<span style="color:#458383;">numDashs</span>)*<span style="color:#458383;">i</span>);
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>context.<span style="color:#7a7a43;">stroke</span>();

}

當需要畫虛線的時候直接呼叫這個方法就行了。但是有的人可能會需要將這個函數直接植入到html5，以方便任何時候調用，這也是可行的，但只是針對你自己使用。

方法二，上面已經提示到了，可以將這個方法直接植入到html5，當做canvas的一個函數

CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,
			dashArray)
	{
		var temp = 0.1;
		if (!dashArray)
			dashArray = [ 10, 5 ];
		var dashCount = dashArray.length;
		this.moveTo(x + temp, y + temp);

		var dx = (x2 - x), dy = (y2 - y);
		var slope = dx ? dy / dx : 1e15;
		var distRemaining = Math.sqrt(dx * dx + dy * dy);
		var dashIndex = 0, draw = true;
		while (distRemaining >= 0.1 && dashIndex < 10000)
		{
			var dashLength = dashArray[dashIndex++ % dashCount];
			if (dashLength == 0)
				dashLength = 0.001; // Hack for Safari
			if (dashLength > distRemaining)
				dashLength = distRemaining;
			var xStep = Math
					.sqrt(dashLength * dashLength / (1 + slope * slope));
			x += xStep;
			y += slope * xStep;
			this[draw ? &#39;lineTo&#39; : &#39;moveTo&#39;](x + temp, y + temp);
			distRemaining -= dashLength;
			draw = !draw;
		}
		// Ensure that the last segment is closed for proper stroking
		this.moveTo(0, 0);
	}

實際上方法二不僅可以畫虛線，虛線只是其中之一的功能，主要的差異在於最後一個參數的設置，設定的不同，所繪製的虛線類型也不相同。至於為什麼，大家如果願意的話，可以自己去研究一下。
需要學習html5的同學請關注php中文網html5影片教學，眾多html5線上影片教學可以免費觀看！

以上是用html5實作畫虛線效果碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！