HTML Canvas 선

实例

// 캔버스 생성：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 새로운 경로 정의：
ctx.beginPath();
// 시작점 정의：
ctx.moveTo(0, 0);
// 끝점 정의：
ctx.lineTo(200, 100);
// 그리기：
ctx.stroke();

직접 테스트해 보세요

Canvas 선 그리기

선 그리기는 캔버스의 경로를 사용합니다：

메서드

beginPath() 메서드는 새로운 경로를 시작합니다. 그는 어떤 것도 그리지 않습니다. 단지 새로운 경로를 정의합니다.

moveTo() 메서드는 선의 시작점을 정의합니다. 그는 어떤 것도 그리지 않습니다. 단지 시작점을 설정합니다.

lineTo() 메서드는 선의 끝점을 정의합니다. 그는 어떤 것도 그리지 않습니다. 단지 끝점을 설정합니다.

stroke() 메서드는 실제로 선을 그립니다. 기본적으로 검은색입니다.

lineWidth 속성

lineWidth 속성은 캔버스에서 그리려는 선의 너비를 정의합니다.

stroke() 메서드 호출 전에 설정해야 합니다.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

직접 테스트해 보세요

strokeStyle 속성

strokeStyle 속성은 캔버스에서 그리려는 스타일을 정의합니다.

stroke() 메서드 호출 전에 설정해야 합니다.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

직접 테스트해 보세요

lineCap 속성

lineCap 속성은 선의 끝 부분 스타일(butt, round 또는 square)을 정의합니다.

기본적으로 square(사각형)입니다.

stroke() 메서드 호출 전에 설정해야 합니다.

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

직접 테스트해 보세요

다른 참조물:

CodeW3C.com의 완전한 Canvas 참조 매뉴얼