Home > Article > Web Front-end > How to draw a rectangle using HTML5 canvas

How to draw a rectangle using HTML5 canvas

不言Original: 2018-12-04 10:20:225304browse

How to use HTML5 canvas to draw a rectangle: first create the corresponding HTML sample file; then draw a rectangle through the rect method of the Canvas context, with code statements such as "canvas.getContext('2d');".

To draw a rectangle using HTML5 canvas, we need to use the rect() method of the Canvas context. Next let's take a look at the specific code implementation.

HTML5 canvas

Let’s look at a specific example

The code is as follows

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.fillStyle = &#39;peachpuff&#39;;
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Instructions:

The Canves object is obtained by the document.getElementById() method. The Canves object calls the getContext() method. The process of obtaining the canvas context is processed together with drawing on the canvas.

Call the context's beginPath() method to start the path. Use rect() to draw a rectangle. The first parameter of rect and the second parameter of rect are the X, Y coordinates of the upper left corner of the rectangle. The third parameter is the width of the drawn rectangle, and the fourth parameter is the height of the drawn rectangle.

Use the fill() method to fill the interior and the stroke method to draw the outline.

Run results

Use a web browser to execute the created HTML file. The effect shown below will be displayed.

HTML5 canvas

The rectangle in the above example is filled inside. Let’s take a look at The rectangle without internal filling

The code is as follows

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景色和背景图*/
    .canvas{
      background-color:#FFFFFF;
      background-image: url("img/t.jpg");
    }
    -->
  </style>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.lineWidth = 4;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Note: When drawing an image, if you do not call the fill() method and only execute the stroke() method, you can draw a rectangle without filling inside.

Running results

The following effect is displayed on the browser

HTML5 canvas

Finally we Let’s look at the drawing of a rectangle that directly fills the interior

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(260, 120, 220, 120);
    context.fillStyle = &#39;burlywood&#39;;
    context.fill();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

The running result is as follows

How to draw a rectangle using HTML5 canvas

The above is the detailed content of How to draw a rectangle using HTML5 canvas. 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：How to draw the outline of text using HTML5 canvasNext article：How to draw the outline of text using HTML5 canvas

See more

How to draw a rectangle using HTML5 canvas

Related articles