fillRect 메소드는 캔버스에 채워진 사각형을 그리는 데 사용됩니다. 구문은 "context.fillRect(x,y,width,height);"이며, 그 중 "x" 및 "y" 매개변수는 x를 나타냅니다. 직사각형의 왼쪽 위 모서리는 y 좌표, "너비" 및 "높이"를 나타내며 직사각형의 너비와 높이를 나타냅니다.
이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.
fillRect는 캔버스에 채워진 사각형을 그리는 데 사용할 수 있는 HTML5의 메서드입니다. 기본 채우기 색상은 검은색입니다. fillRect 메서드의 구체적인 사용법을 살펴보겠습니다.
먼저 fillRect
context.fillRect(x,y,width,height);
의 기본 구문을 살펴보겠습니다. x는 직사각형의 왼쪽 상단 모서리의 x 좌표를 나타냅니다.
y는 직사각형의 왼쪽 상단 모서리의 y 좌표를 나타냅니다.
width는 직사각형의 너비를 나타냅니다.
높이는 직사각형의 높이를 나타냅니다.
(참조: HTML5 캔버스)
구체적인 예를 살펴보겠습니다
코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="rectangle" width="200" height="200"></canvas>
<script>
// 使用JS获取canvas元素
var canvas=document.getElementById('rectangle');
// 获取canvas
var c=canvas.getContext('2d');
// 在画布上绘制一个矩形
c.fillRect(50,50,100,100);
</script>
</body>
</html>효과는 다음과 같습니다. 검은색으로 채워진 직사각형이 그려집니다
이 글은 여기서 끝납니다 , 프런트엔드에 대한 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 칼럼 튜토리얼을 참조하세요! ! !
위 내용은 fillRect 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
