Home >Web Front-end >H5 Tutorial >How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas

How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas

不言Original: 2018-09-17 13:43:4517353browse

The canvas element uses JavaScript to draw images on web pages. The canvas is a rectangular area that you can control every pixel of. canvas has many ways to draw paths, rectangles, circles, characters, and add images. So, How to draw a rectangle using canvas? The following article will introduce to you the implementation method of drawing a rectangle on canvas. You can take a look if you need it.

What we need to know is that the method related to rectangles in canvas is rect(). Use the stroke() or fill() method to actually draw a rectangle on the canvas.

The rect() method can receive 4 parameters: the x coordinate of the rectangle, the y coordinate of the rectangle, the width of the rectangle, and the height of the rectangle. The units of these parameters are pixels.

Next we will use the strokerect() and fillrect() methods to draw a rectangle.

First, let’s take a look at an example of a filled rectangle drawn using the fillrect() method in canvas.

The fillRect() method draws a rectangle on the canvas that is filled with the specified color. The color of the fill is specified through the fillStyle property.

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <title>用canvas画矩形</title>  
    <style>  
    </style>  
    </head>  
    <body>  
    <canvas id="canvas" width="600" height="400"></canvas>  
    <script type="text/javascript">  
      function draw(id){  
          var canvas = document.getElementById(id);  
          var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象  
          context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
          context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
     }  
     draw("canvas");  
    </script>  
    </body>  
    </html>

The effect of drawing a filled rectangle on canvas is as follows:

##Then Let's take a look at an example of an unfilled rectangle drawn using the strokerect() method in canvas.

The strokeRect() method draws a rectangle on the canvas that is stroked with the specified color. The stroke color is specified through the strokeStyle property.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
  function draw(id){
      var canvas = document.getElementById(id);
      var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象
      context.strokeStyle = "pink";  //图形边框的填充颜色
      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：     
      context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
      context.strokeRect(110,110,180,120);      
 }
 draw("canvas");
</script>
</body>
</html>

The effect of drawing an unfilled rectangle on canvas is as follows:

How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas

Finally this article ends here, more about canvas For more relevant knowledge, please refer to

HTML5 Development Manual.

The above is the detailed content of How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 canvas

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：How to draw a clock on canvas? The implementation process of drawing a ring clock on canvasNext article：How to draw a clock on canvas? The implementation process of drawing a ring clock on canvas

See more

How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas

Related articles