HTML 캔버스 beginPath() 메서드

❮ HTML 캔버스 참조

예시

캔버스에 두 개의 경로를 그립니다. 하나는 녹색과 하나는 보라색:

브라우저는 HTML5캔버스태그를 지원하지 않습니다.

자바스크립트:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green"; // Green path
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.strokeStyle = "purple"; // Purple path
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);
ctx.stroke(); // Draw it

브라우저 지원

표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Method
beginPath() Yes 9.0 Yes Yes Yes

정의 및 사용

beginPath() 메서드는 경로를 시작하거나 현재 경로를 재설정합니다.

팁: moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo() 및 arc()를 사용하여 경로를 만듭니다.

팁: 실제로 캔버스에 경로를 그리려면 stroke() 메서드를 사용하십시오 .

자바스크립트 구문: 컨텍스트 .beginPath();

❮ HTML 캔버스 참조