HTML 캔버스 closePath() 메서드
예시
문자 L 모양의 경로를 그린 다음 시작점으로 다시 선을 그립니다.
자바스크립트:
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();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| closePath() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
closePath() 메서드는 현재 지점에서 시작 지점으로 다시 경로를 생성합니다.
팁: 실제로 캔버스에 경로를 그리려면 stroke() 메서드를 사용하십시오 .
팁: fill() 메서드를 사용 하여 그림을 채웁니다(기본값은 검정색). 다른 색상/그라디언트로 채우 려면 fillStyle 속성을 사용하십시오.
| 자바스크립트 구문: | 컨텍스트 .closePath(); |
|---|
더 많은 예
예시
채우기 색상으로 빨간색 사용:
자바스크립트:
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 = "red";
ctx.fill();
❮ 캔버스 개체