Canvas를 사용하여 점선을 그리는 방법-H5 튜토리얼-php.cn

우리는 이전 장에서 선형 경로를 그리는 데 주로 movoTo() 및 lineTo()와 같은 메서드를 사용한다고 언급했습니다. 물론 Canvas 2D API는 점선 그리기 메서드인 CanvasRenderingContext2D.setLineDash()도 제공합니다.

다음은 점선을 그리는 방법을 살펴보겠습니다

Syntax

ctx.setLineDash(segments);

로그인 후 복사

매개변수 세그먼트:

배열 배열입니다.

교대로 그려진 선분과 간격(좌표 공간 단위)의 길이를 나타내는 숫자 집합입니다.

배열 요소의 개수가 홀수이면 배열의 요소가 복사되어 반복됩니다. 예를 들어 [5, 15, 25]는 [5, 15, 25, 5, 15, 25]가 됩니다.

여기 마지막 문장을 이해하지 못했을 수도 있지만 상관없습니다. 계속 읽어보겠습니다.

먼저 간단한 점선을 그립니다

function drawDashed(){
　　cxt.lineWidth = 4;
　　cxt.strokeStyle = 'green';
　　cxt.beginPath();
　　cxt.setLineDash([5, 15]);
　　cxt.moveTo(20, 20);
　　cxt.lineTo(400, 20);
　　cxt.stroke();
}

로그인 후 복사

그래서 점선을 그리는 것도 매우 간단합니다. 매개변수를 변경하려고 합니다. setLineDash() 메소드 결과의 차이를 살펴보세요

= 4= 'green'50, 60400, 60= 4= 'red'0, 100400, 100

로그인 후 복사

이 예에서 매개변수 배열에 요소가 하나만 있을 때 "선 세그먼트와 간격"이 동일하다는 것을 알 수 있습니다. . 매개변수 배열의 요소가 비어 있으면 실선을 그립니다.

몇 가지 예를 살펴보겠습니다

function drawDashed(){
    cxt.lineWidth = 4;

    cxt.strokeStyle = 'blue';
    cxt.beginPath();
    cxt.setLineDash([20, 5]);
    cxt.moveTo(20, 40);
    cxt.lineTo(380, 40);
    cxt.stroke();

    cxt.strokeStyle = 'green';
    cxt.beginPath();
    cxt.setLineDash([10, 20, 30]);
    cxt.moveTo(20, 80);
    cxt.lineTo(380, 80);
    cxt.stroke();

    cxt.strokeStyle = 'red';
    cxt.beginPath();
    cxt.setLineDash([10, 20, 30, 40]);
    cxt.moveTo(20, 120);
    cxt.lineTo(380, 120);
    cxt.stroke();
}

로그인 후 복사

몇 가지 예를 볼 수 있습니다. setLineDash() 메서드는 다음과 같습니다. 매개변수의 요소는 세그먼트와 공간 사이에 그룹화되고 루프되어 점선을 그립니다.

그러나 두 번째 예에서는 우리가 전달한 매개변수의 요소 수가 기본 숫자일 때와는 조금 다르게 보입니다. 요소를 복사하여 반복합니다.

이렇게 시작했습니다. 매개변수 세그먼트의 요소 수가 홀수이면 배열의 요소가 복사되어 반복된다고 합니다.

[10, 20, 30]은 [10, 20, 30, 10, 20, 30]이 됩니다.

getLineDash 메소드

점선의 선분과 간격을 설정하는 setLineDash 메소드가 있고, 점선의 선분과 간격을 구하는 해당 메소드가 있습니다.

ctx.getLineDash()

로그인 후 복사

이 메서드는 배열 배열을 반환합니다. 교대로 그려진 선분과 간격(좌표 공간 단위)의 길이를 설명하는 숫자 집합입니다. 배열 요소의 개수가 홀수이면 배열 요소가 복사되어 반복됩니다. 예를 들어 선분을 [5, 15, 25]로 설정하면 다음과 같은 반환 값이 [5, 15, 25, 5, 15, 25]가 됩니다.

<code class=" language-js"><span class="token keyword">var canvas <span class="token operator">= document<span class="token punctuation">.<span class="token function">getElementById<span class="token punctuation">(<span class="token string">"canvas"<span class="token punctuation">)<span class="token punctuation">;<span class="token keyword">var ctx <span class="token operator">= canvas<span class="token punctuation">.<span class="token function">getContext<span class="token punctuation">(<span class="token string">"2d"<span class="token punctuation">)<span class="token punctuation">;
ctx<span class="token punctuation">.<span class="token function">setLineDash<span class="token punctuation">(<span class="token punctuation">[<span class="token number">5<span class="token punctuation">, <span class="token number">15<span class="token punctuation">]<span class="token punctuation">)<span class="token punctuation">;<span class="token punctuation"><span class="token function"><span class="token punctuation"><span class="token punctuation"><span class="token function"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token comment">ctx<span class="token punctuation">.<span class="token function">beginPath<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
ctx<span class="token punctuation">.<span class="token function">moveTo<span class="token punctuation">(<span class="token number">0<span class="token punctuation">,<span class="token number">100<span class="token punctuation">)<span class="token punctuation">;
ctx<span class="token punctuation">.<span class="token function">lineTo<span class="token punctuation">(<span class="token number">400<span class="token punctuation">, <span class="token number">100<span class="token punctuation">)<span class="token punctuation">;
ctx<span class="token punctuation">.<span class="token function">stroke<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

로그인 후 복사

console.log(ctx.getLineDash()); // [5, 15]

로그인 후 복사

CanvasRenderingContext2D를 확장하여 점선 그리기

캔버스 API를 사용하여 점선을 그릴 수 있을 뿐만 아니라 메서드를 확장하여 직접 점선을 그릴 수도 있습니다.

확장 아이디어:
1. 시작점 좌표 가져오기
2. 점선의 전체 길이를 계산하고, 점선에 포함된 짧은 선 수를 계산한 다음 루프로 그립니다. 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다

var canvas = document.getElementById(&#39;canvas&#39;);var cxt = canvas.getContext(&#39;2d&#39;);var moveToFunction = CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.moveToLocation = {};// 重新定义moveTo方法CanvasRenderingContext2D.prototype.moveTo = function (x, y){this.moveToLocation.x = x;this.moveToLocation.y = y;
    moveToFunction.apply(this, [x, y]);
};
CanvasRenderingContext2D.prototype.dashedLineTo = function(x, y, dashedLength){
    dashedLength = dashedLength === undefined ? 5 : dashedLength;var startX = this.moveToLocation.x;var startY = this.moveToLocation.y;var deltaX = x - startX;var deltaY = y - startY;var numberDash = Math.floor(Math.sqrt(deltaX*deltaX + deltaY*deltaY)/dashedLength);for(var i=0; i < numberDash; i++){this[i%2 === 0 ? &#39;moveTo&#39; : &#39;lineTo&#39;](startX + (deltaX/numberDash)*i, startY + (deltaY/numberDash)*i); //等同于this.moveTo(x, y)或者 this.LineTo(x, y)    }this.moveTo(x, y); //连续绘制虚线时，起点从当前点开始};//绘制虚线cxt.lineWidth = 3;
cxt.strokeStyle = &#39;green&#39;;
cxt.moveTo(20, 20);
cxt.dashedLineTo(200, 200);
cxt.dashedLineTo(300, 100, 10);
cxt.dashedLineTo(400, 300);
cxt.stroke();

로그인 후 복사