Utiliser HTML5 pour implémenter le code de l'effet de ligne pointillée

html5 existe depuis longtemps, mais je n'ai commencé à y entrer en contact que récemment. HTML5 fournit de nombreuses fonctions intégrées qui peuvent réaliser de nombreuses fonctions, telles que dessiner des segments de ligne, dessiner des rectangles, dessiner des cercles, dessiner des arcs, etc. Cependant, HTML5 ne propose pas la fonction de dessiner des lignes pointillées. Si vous souhaitez dessiner des courbes sur le canevas, cela demandera un petit effort.

Il existe deux façons de réaliser la fonction de dessin de lignes pointillées :

La première méthode consiste à écrire une fonction séparée et à appeler simplement cette courbe lorsque vous souhaitez dessiner une courbe.

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

}

Lorsque vous avez besoin de tracer une ligne pointillée, appelez simplement cette méthode directement. Mais certaines personnes devront peut-être implanter cette fonction directement dans HTML5 pour faciliter son appel à tout moment. Cela est également réalisable, mais ce n'est que pour votre propre usage.

Méthode 2, comme mentionné ci-dessus, cette méthode peut être directement implantée dans HTML5 en fonction du canevas

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

En fait, la méthode 2 peut non seulement tracer des lignes pointillées, les lignes pointillées sont juste l'une d'entre elles. L'une des fonctions, la principale différence réside dans le réglage du dernier paramètre. Différents réglages conduiront à différents types de lignes pointillées tracées. Quant à savoir pourquoi, si vous le souhaitez, vous pouvez l'étudier vous-même.
Étudiants qui ont besoin d'apprendre le html5, veuillez faire attention au site Web php chinois Tutoriel vidéo html5 De nombreux didacticiels vidéo html5 en ligne peuvent être visionnés gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!