JavaScript를 사용하여 canvas에 선 그리기
간단한 선 그리기부터 시작해 봅시다. 이를 이해하기 위해, 종이 한 장과 연필이 있다고 상상해 보세요. 당신은 그 종이 위에 그림을 그릴 수도 있고, 그림을 그리지 않고 단지 연필을 원하는 지점으로 옮길 수도 있습니다.
JavaScript도 비슷하게 작동합니다: 그것은 연필(또는 그리기 펜)을 가지고 있으며,
원하는 위치로 moveTo 메서드를 사용하여 펜을 이동시킬 수 있고,
그리는 것은 lineTo 메서드를 사용하여 할 수 있습니다.
두 메서드 모두 매개변수로 펜 끝을 이동시킬 지점을 받습니다 - 첫 번째 매개변수는
수평 좌표, 두 번째는 수직 좌표입니다. 좌표의 원점 - 점 0,
0 - 는 요소의 왼쪽 상단 모서리입니다.
펜이 원하는 지점으로 이동할 때 -
moveTo 메서드는 단순히 이동시키고,
lineTo는 이동 과정에서 현재 펜 위치부터
펜이 이동하게 될 지점까지 선을 그립니다.
그러나, 위의 코드를 실행하면 아무 일도 일어나지 않습니다:
두 개의 명령어를 더 작성해야 합니다: 첫 번째 명령어 beginPath는
선 그리기를 시작하기 전에 지정되어야 하고, 두 번째 명령어 stroke는
모든 moveTo와 lineTo 조합 후에 호출되어야
선이 그려집니다.
자, 이제 선을 그리는 작업 코드를 작성해 봅시다:
선을 그려 봅시다
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
새를 그려 봅시다
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
삼각형을 그려 봅시다
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
사각형을 그려 봅시다
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
도형 닫기
닫힌 도형을 그리기 위해서는 모든 선을 그릴 필요가 없습니다 -
마지막 선은 자동으로 그려져 도형을 닫을 수 있습니다.
이를 위해 stroke 메서드 전에 closePath 메서드를
호출해야 합니다.
이 메서드는 끝점에서 시작점으로 직선을 그려 도형을 닫으려고 시도합니다. 만약 도형이 이미 닫혀 있거나 단순히 점이라면, 이 메서드는 아무것도 하지 않습니다.
closePath를 사용하여 삼각형을 그려 봅시다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - 이 단계는 생략합니다
ctx.closePath();
ctx.stroke();
:
도형 채우기
stroke 메서드 대신 fill 메서드를 사용할 수 있습니다 - 이 경우
도형이 완전히 닫혀 있을 필요는 없습니다 - 그래도 채워집니다:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - 이 단계는 생략합니다
//ctx.closePath(); - 이것도 생략합니다
ctx.fill();
:
