HTML 캔버스의 rect() 메서드는 사각형을 만드는 데 사용됩니다.
다음은 구문입니다 -
context.fillRect(p,q,width,height);
위,
- p: 직사각형의 왼쪽 위 모서리의 x 좌표
- q: 직사각형의 왼쪽 위 모서리의 y 좌표
- 너비: 직사각형 너비
- 높이: 직사각형의 높이
이제 캔버스의 rect() 메서드를 구현하는 예를 살펴보겠습니다 -
예시
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(100, 60, 200, 200); ctx.fillStyle = "orange"; ctx.fill(); ctx.beginPath(); ctx.rect(110, 90, 180, 120); ctx.fillStyle = "yellow"; ctx.fill(); </script> </body> </html>
출력