html5 を使用して点線効果コードを実装する

html5 はリリースされてから長いですが、私が触れ始めたのは最近です。HTML5 には、線分の描画、長方形の描画、円の描画、円弧の描画など、さまざまな機能を実現できる組み込み関数が多数用意されています。 、など。ただし、HTML5には点線を描く機能がありませんので、キャンバス上に曲線を描きたい場合は少し手間がかかります。

点線を描く機能を実現するには 2 つの方法があります:

方法 1 つは、別の関数を作成し、曲線を描きたいときにこの曲線を呼び出すだけです。

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 に直接埋め込む必要がある場合もありますが、これは自分で使用する場合に限ります。

方法 2、上で述べたように、このメソッドは Canvas の関数として HTML5 に直接埋め込むことができます

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

実際、方法 2 は点線を描画できるだけでなく、点線は機能の 1 つにすぎません。主な違いは次のとおりです。最後に パラメータの設定により、描画される破線の種類も​​異なります。その理由については、その気になれば自分で勉強することができます。
html5 を学習する必要がある学生は、php 中国語 Web サイトに注意してください。html5 ビデオ チュートリアル、多くの html5 オンライン ビデオ チュートリアルを無料で視聴できます。

以上がhtml5 を使用して点線効果コードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。