Verwenden von HTML5 zum Implementieren des gepunkteten Linieneffektcodes

HTML5 gibt es schon seit langem, aber ich komme erst seit Kurzem damit in Berührung. HTML5 bietet viele integrierte Funktionen, mit denen viele Funktionen erreicht werden können, z. B. das Zeichnen von Liniensegmenten, das Zeichnen von Rechtecken, das Zeichnen von Kreisen usw. Zeichnen von Bögen usw. Allerdings bietet HTML5 nicht die Funktion, gepunktete Linien zu zeichnen. Wenn Sie Kurven auf Leinwand zeichnen möchten, ist dies mit etwas Aufwand verbunden.

Es gibt zwei Möglichkeiten, die Funktion des Zeichnens gepunkteter Linien zu realisieren:

Methode eins besteht darin, eine separate Funktion zu schreiben und diese Kurve einfach aufzurufen, wenn Sie eine Kurve zeichnen möchten.

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

}

Wenn Sie eine gepunktete Linie zeichnen müssen, rufen Sie diese Methode einfach direkt auf. Einige Leute müssen diese Funktion jedoch möglicherweise direkt in HTML5 implantieren, um den Aufruf jederzeit zu ermöglichen. Dies ist auch möglich, jedoch nur für den eigenen Gebrauch.

Methode 2, wie oben erwähnt, kann diese Methode als Canvas-Funktion direkt in HTML5 implantiert werden

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

Tatsächlich kann Methode 2 nicht nur gepunktete Linien zeichnen, sondern auch gepunktete Linien Nur eine dieser Funktionen. Der Hauptunterschied liegt in der Einstellung des letzten Parameters. Unterschiedliche Einstellungen führen zu unterschiedlichen Arten von gepunkteten Linien. Was den Grund angeht, wenn Sie möchten, können Sie es selbst studieren.
Studenten, die HTML5 lernen müssen, achten bitte auf die chinesische PHP-Website HTML5-Video-Tutorial. Viele HTML5-Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonVerwenden von HTML5 zum Implementieren des gepunkteten Linieneffektcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!