HTML 캔버스의 fillRect() 메서드는 웹 페이지에 채워진 사각형을 만드는 데 사용됩니다. 기본 색상은 검정색입니다.
다음은 구문입니다 -
context.fillRect(p,q,width,height);
위,
- p :사각형의 왼쪽 위 모서리의 x 좌표
- q :사각형의 왼쪽 위 모서리의 y 좌표
- 너비 :직사각형의 너비
- 높이 :직사각형의 높이
이제 캔버스의 fillRect() 메서드를 구현하는 예를 살펴보겠습니다.
예시
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 500, 350); ctx.clearRect(250, 100, 50, 100); </script> </body> </html>
출력