Canvas API 시작하기: 선 및 사각형

캔버스 API란 무엇입니까?

Canvas API는 JavaScript로 그래픽을 그릴 수 있는 메서드와 속성으로 구성됩니다. 이러한 그래픽은 애니메이션 및 게임 스프라이트와 같은 다양한 용도로 사용할 수 있습니다.

설정

캔버스에 그리려면 먼저 html 파일에 캔버스를 만들어야 합니다.

<canvas id="my-canvas" height="600" width="800"></canvas>

여기서 높이와 너비를 지정할 필요는 없습니다. 그렇지 않으면 기본적으로 300w x 150h로 설정되지만 JavaScript를 사용하여 치수를 설정할 수 있습니다.

이제 캔버스 요소 및 드로잉 컨텍스트에 대한 참조를 얻을 수 있습니다. 캔버스로 그릴 때 그리기 표면은 실제로 그리기 컨텍스트입니다. 캔버스 요소는 그리기 컨텍스트의 컨테이너 또는 프레임과 같습니다. 이 게시물은 2D 컨텍스트에 중점을 두지만 3D context도 있습니다.

const canvas = document.getElementById('my-canvas'); 
const drawingContext = canvas.getContext('2d');

직사각형

직사각형을 그리려면 fillRect 와 함께 fillStyle 메서드를 사용합니다.
fillRect(x, y, width, height)x/y 값은 사각형의 시작점이고 width/height는 사각형의 크기입니다.

drawingContext.fillStyle = 'red';
drawingContext.fillRect(canvas.width/2 - 10, canvas.height/2 - 10, 20, 20);

캔버스 중앙의 빨간색 20x20px 정사각형



채워지지 않은 윤곽선이 있는 사각형을 만들 수도 있습니다.

drawingContext.strokeStyle = 'purple';
drawingContext.strokeRect(canvas.width/2 - 10, canvas.height/2 - 10, 20, 20);

캔버스 중앙에 있는 20x20px 보라색 윤곽선 사각형

윤곽

경로가 시작되고 끝나는 위치를 지정해야 하기 때문에 선은 직사각형보다 약간 더 복잡합니다.
beginPath()는 새 그리기 경로를 시작합니다.
moveTo() 지정된 x,y 좌표에서 새 하위 경로를 시작합니다. 즉, 라인을 시작할 위치입니다.
lineTo()는 하위 경로의 마지막 지점에 직선을 연결하는 데 사용되며 선을 끝낼 x,y 좌표를 지정합니다.
strokeStyle는 선의 색상을 설정합니다. (디폴트: 블랙)
lineWidth는 선의 너비를 설정합니다. (기본값: 1)
stroke()는 실제로 선을 그리는 데 사용됩니다.

다음은 2개의 서로 다른 선입니다. 가로 1px 너비의 자주색 선과 3px 너비의 대각선 빨간색 선입니다.

drawingContext.beginPath();
drawingContext.strokeStyle = 'purple';
drawingContext.moveTo(10,15);
drawingContext.lineTo(290,15)
drawingContext.stroke();

drawingContext.beginPath();
drawingContext.lineWidth = 3;
drawingContext.strokeStyle = 'red';
drawingContext.moveTo(10,30);
drawingContext.lineTo(200,90)
drawingContext.stroke();

새 경로를 시작하지 않으면 이전 하위 경로가 여전히 현재 경로의 일부이고 stroke()를 호출하면 본질적으로 자주색 ​​선 위에 칠해지기 때문에 이 두 선은 모두 빨간색이 됩니다.

// Example without beginPath()

drawingContext.strokeStyle = 'purple';
drawingContext.moveTo(10,15);
drawingContext.lineTo(290,15)
drawingContext.stroke();

drawingContext.lineWidth = 3;
drawingContext.strokeStyle = 'red';
drawingContext.moveTo(10,30);
drawingContext.lineTo(200,90)
drawingContext.stroke();

새 경로가 생성되지 않았기 때문에 두 줄이 모두 빨간색입니다.



경우에 따라 이 동작이 필요할 수 있습니다. 예를 들어, 어떤 이유로 이전의 더 큰 획을 통해 획을 만들고 새 획도 만들려는 경우:

drawingContext.lineWidth = 60;
drawingContext.strokeStyle = 'blue';
drawingContext.moveTo(0, canvas.height/2);
drawingContext.lineTo(canvas.width, canvas.height/2);
drawingContext.stroke();

drawingContext.lineWidth = 10;
drawingContext.strokeStyle = 'red';
drawingContext.moveTo(0, canvas.height/2 + 20);
drawingContext.lineTo(canvas.width, canvas.height/2 + 20);
drawingContext.stroke();

빨간색 선을 1개만 만들었는데 두꺼운 파란색 선 안에 빨간색 선이 2개 생성됩니다.



새 경로를 시작하지 않았기 때문에 10px 빨간색 선을 만들 때 새 경로와 이전 경로를 10px 빨간색 선으로 그렸습니다.

라인 캡

선의 끝 모양을 변경하는 옵션에는 butt , round 또는 square 의 세 가지 옵션이 있습니다. butt 끝이 기본값입니다. 끝은 끝점에서 정사각형입니다. round 끝이 둥글고 반원이 선 끝에 추가됩니다. square 선 두께의 절반 높이와 너비가 동일한 상자를 끝에 추가합니다. butt는 지정한 정확한 지점에서 멈추는 유일한 끝점입니다. 나머지는 지정된 끝점을 넘어 확장됩니다.

// default
drawingContext.beginPath();
drawingContext.lineWidth = 20;
drawingContext.moveTo(20, 20);
drawingContext.lineTo(canvas.width-20, 20);
drawingContext.stroke();

// round 
drawingContext.beginPath();
drawingContext.lineCap = 'round';
drawingContext.lineWidth = 20;
drawingContext.moveTo(20, 50);
drawingContext.lineTo(canvas.width-20, 50);
drawingContext.stroke();

// square 
drawingContext.beginPath();
drawingContext.lineCap = 'square';
drawingContext.lineWidth = 20;
drawingContext.moveTo(20, 80);
drawingContext.lineTo(canvas.width-20, 80);
drawingContext.stroke();

위에서부터 순서대로 엉덩이, 원형, 사각형



다음 단계: 복잡한 모양