fillRect 메소드를 사용하는 방법
- 不言원래의
- 2019-02-11 17:21:0912912검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5가 할 수 있는 일다음 기사：HTML5가 할 수 있는 일