HTML Canvas 형상

인스턴스

예제 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

자신의 손으로 시도해 보세요

Canvas 선 그리기

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

메서드

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

moveTo() 선의 시작점을 정의합니다. 그것은 아무것도 그리지 않습니다. 단지 시작점을 설정하는 것입니다.

lineTo() 메서드는 선의 끝점을 정의합니다. 그것은 아무것도 그리지 않습니다. 단지 끝점을 설정하는 것입니다.

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

更多实例

예제 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

자신의 손으로 시도해 보세요

예제 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

자신의 손으로 시도해 보세요

힌트

사각형을 그리려면 4개의 선을 그리지 않아도 됩니다.

다음 장에서는 drawRect() 메서드를 사용하여 사각형을 그립니다.

strokeStyle 속성

strokeStyle 属性는 캔버스에서 그리는 데 사용할 스타일을 정의합니다.

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

인스턴스

ctx.beginPath();
// 정의하는 사각형
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 정의하는 삼각형
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

자신의 손으로 시도해 보세요

다른 참조:

CodeW3C.com의 완전한 Canvas 참조 가이드