Home > Article > Web Front-end > How to use fillRect method

How to use fillRect method

不言Original: 2019-02-11 17:21:0912871browse

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What html5 can doNext article：What html5 can do

See more

How to use fillRect method

Related articles