html5를 사용하여 점선 효과 코드 구현

html5는 나온 지 꽤 됐는데 최근에야 접하기 시작했습니다. HTML5에는 선분 그리기, 직사각형 그리기, 원 그리기 등 다양한 기능을 구현할 수 있는 내장 기능이 많이 내장되어 있습니다. 호 그리기 등 하지만 HTML5에서는 점선을 그리는 기능을 제공하지 않습니다. 캔버스에 곡선을 그리려면 약간의 노력이 필요합니다.

점선 그리기 기능을 구현하는 방법은 두 가지가 있습니다.

첫 번째 방법은 별도의 함수를 작성하고, 곡선을 그리고 싶을 때 이 곡선을 호출하면 됩니다.

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는 위에서 언급했듯이 이 방법은 캔버스의 기능으로 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는 점선을 그릴 수 있을 뿐만 아니라 점선도 하나의 기능일 뿐입니다 그 중 가장 큰 차이점은 마지막 매개변수의 설정에 있습니다. 설정이 다르면 점선의 종류도 달라집니다. 왜냐면, 당신이 의향이 있다면 스스로 공부할 수 있습니다.
html5를 배워야 하는 학생은 PHP 중국어 웹사이트 html5 동영상 튜토리얼을 주목하세요. 많은 html5 온라인 동영상 튜토리얼을 무료로 시청할 수 있습니다!

위 내용은 html5를 사용하여 점선 효과 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!