Home >Web Front-end >H5 Tutorial >How to use fillRect method
How to use fillRect method
- 不言Original
- 2019-02-11 17:21:0912909browse
The fillRect method is used to draw a filled rectangle on the canvas. The syntax is "context.fillRect(x,y,width,height);"; among them, the parameters "x" and "y" represent the upper left corner of the rectangle. The x and y coordinates of the corners, "width" and "height" represent the width and height of the rectangle.
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
fillRect is a method in HTML5 that can be used to draw a filled rectangle on the canvas. The default fill color is black. Let’s take a look at the specific use of the fillRect method.
Let’s first take a look at the basic syntax of fillRect
context.fillRect(x,y,width,height);
x represents the x coordinate of the upper left corner of the rectangle.
y represents the y coordinate of the upper left corner of the rectangle.
width represents the width of the rectangle.
height represents the height of the rectangle.
(Reference: HTML5 canvas)
Let’s look at the specific example
The code is as follows
<!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>The effect is as follows: drawing A rectangle filled with black
This article ends here. For more exciting content about the front-end, you can pay attention to other related column tutorials on the PHP Chinese website! ! !
The above is the detailed content of How to use fillRect method. For more information, please follow other related articles on the PHP Chinese website!