HTML canvas closePath() 메서드
정의와 사용법
closePath() 메서드를 사용하여 현재 포인트에서 시작점으로의 경로를 생성합니다.
훈련:다음을 사용하여: stroke() 화면에 정확한 경로를 그리기 위한 메서드를 사용합니다.
훈련:다음을 사용하여: fill() 이미지를 채우기 위한 메서드를 사용합니다(기본적으로 검정색입니다). 다음을 사용하여: fillStyle 다른 색상/반지오메트리를 채우기 위한 속성을 사용합니다.
예제
예제 1
L 자형의 경로를 그리고 시작점으로 돌아오는 선을 그립니다:
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
녹색을 채우는 색상으로 설정하십시오：
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();
브라우저 지원
표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
