Canvas API 시작하기: 복잡한 모양

Part 1에서는 선과 직사각형을 만드는 기본 사항을 살펴보았습니다. 여기서는 더 복잡한 모양을 만드는 방법에 대해 설명하겠습니다.

먼저 300x300 캔버스 요소를 만들고 JavaScript에서 참조를 가져옵니다.

<canvas id="canvas" height="300" width="300"></canvas>

const ctx = document.getElementById('canvas').getContext('2d');

연결 라인

I부에서 설명한 것처럼 (beginPath() 사용) 경로를 시작하고 moveTo() 및 lineTo() 방법을 사용하여 선의 시작과 끝의 x,y 값을 플로팅하고 다음을 생성하여 선을 만들 수 있습니다. 라인stroke() . 획을 만들기 전에 실제로 선의 점을 계속 그릴 수 있습니다.
lineTo()를 사용하면 선의 x,y 끝점을 만듭니다. 동일한 경로를 따라 다시 사용하면 이전 끝점에서 선이 연장됩니다.

ctx.lineWidth = 3; // just making it a little more visible
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.lineTo(20,200);
ctx.lineTo(100,200);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.stroke();

삼각형

닫힌 모양을 만들려면 시작점으로 돌아가서 lineTo()를 만들 수 있습니다.

ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(ctx.canvas.width/2, 20);
ctx.lineTo(20, ctx.canvas.height - 20);
ctx.lineTo(ctx.canvas.width - 20, ctx.canvas.height - 20);
ctx.lineTo(ctx.canvas.width/2,20);
ctx.stroke();

하지만 어, 여기서 무슨 일이야?




선의 fillCap를 변경하여 이 문제를 해결할 수 있지만 다른 피벗 포인트와 정확히 일치하지 않습니다.

ctx.fillCap = 'round';

fillCap를 변경하는 대신 더 나은 옵션이 있습니다.

마지막 closePath() 지점 연결 대신 lineTo()를 사용하면 해당 지점이 자동으로 깔끔하게 연결됩니다.

ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(ctx.canvas.width/2, 20);
ctx.lineTo(20, ctx.canvas.height - 20);
ctx.lineTo(ctx.canvas.width - 20, ctx.canvas.height - 20);
ctx.closePath(); // <--- replaced the final lineTo with closePath
ctx.stroke();

라인 조인

세그먼트 연결의 스타일을 지정하는 lineJoin 옵션도 있습니다: bevel , miter 및 round . round는 모서리를 둥글게 만들고, miter는 선 세그먼트의 외부 가장자리를 단일 점으로 결합하며 기본값이며, bevel는 연결된 선 세그먼트의 끝점을 채우고 평평하게 만듭니다.

도형 채우기

fillStyle 및 fill() 를 사용하여 도형을 채울 수 있습니다.

ctx.fillStyle = 'red'; < --- set the color
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(ctx.canvas.width/2, 20);
ctx.lineTo(20, ctx.canvas.height - 20);
ctx.lineTo(ctx.canvas.width - 20, ctx.canvas.height - 20);
ctx.fill(); < --- fill the shape
ctx.closePath();
ctx.stroke();

여기서 주문이 중요합니다. fill() 다음에 stroke() 하면 채우기가 맨 위에 있기 때문에 윤곽선이 더 얇아집니다.

ctx.fillStyle = 'red';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(ctx.canvas.width/2, 20);
ctx.lineTo(20, ctx.canvas.height - 20);
ctx.lineTo(ctx.canvas.width - 20, ctx.canvas.height - 20);
ctx.closePath();
ctx.stroke();
ctx.fill(); < --- fill the shape after creating the stroke