Canvas closePath() 메서드

Canvas 참조 매뉴얼

정의와 사용법

closePath() 현재 포인트에서 시작점으로의 경로를 만드는 메서드.

ヒント:다음을 사용하여: stroke() 캔버스에서 정확한 경로를 그리는 메서드.

ヒント:다음을 사용하여: fill() 이미지를 채우기 위해 사용하는 메서드(기본적으로 검은색입니다). 다음을 사용하여: fillStyle 또 다른 색상/그래디언트를 채우기 위해 속성을 사용하세요.

예제

예제 1

L자 모양의 경로를 그린 다음, 시작점으로 돌아오는 선을 그립니다:

당신의 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

직접 시험해 보세요

ヒント:페이지 하단에 더 많은 예제가 제공됩니다.

문법

context.closePath();

더 많은 예제

예제 2

녹색을 채우기 색상으로 설정하세요:

당신의 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

직접 시험해 보세요

브라우저 지원

표의 숫자는 이 특성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

Canvas 참조 매뉴얼