How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas-H5 Tutorial-php.cn

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

不言

Release： 2018-09-17 13:43:45

Original

17294 people have browsed it

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>

Copy after login

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>

Copy after login

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!