HTML 캔버스 채우기() 메서드
예시
두 개의 150*100 픽셀 직사각형을 그립니다. 하나는 빨간색으로 채우고 다른 하나는 파란색으로 채우십시오.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| fill() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
fill() 메서드는 현재 도면(경로)을 채웁니다. 기본 색상은 검정색입니다.
팁: 다른 색상/그라디언트로 채우 려면 fillStyle 속성을 사용하십시오.
참고: 경로가 닫히지 않은 경우 fill() 메서드는 경로를 닫기 위해 경로의 마지막 지점에서 시작점까지 선을 추가한 다음(예: closePath() ) 경로를 채웁니다.
| 자바스크립트 구문: | 컨텍스트 .fill(); |
|---|
❮ HTML 캔버스 참조