How to use fillRect method-H5 Tutorial-php.cn

How to use fillRect method

不言

Release： 2022-04-06 19:09:39

Original

12912 people have browsed it

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.

How to use fillRect method

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);

Copy after login

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(&#39;rectangle&#39;);
        // 获取canvas
        var c=canvas.getContext(&#39;2d&#39;);
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

Copy after login

The effect is as follows: drawing A rectangle filled with black

How to use fillRect method

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!