Home >Web Front-end >H5 Tutorial >How to draw a circle in HTML5 canvas? (code example)

How to draw a circle in HTML5 canvas? (code example)

不言Original: 2018-12-04 10:51:298818browse

Canvas can be used to draw various graphics, so how to use HTML5 canvas to draw a circle? This article will introduce to you the method of drawing circles on HTML5 canvas. Let’s take a look at the specific content.

HTML5 canvas

Let’s look at the example directly

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.arc(cx, cy, radius, 0, 2 * Math.PI, false);
          context.fillStyle = &#39;#9fd9ef&#39;;
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = &#39;#00477d&#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>

Running results

Execute the above HTML file on the browser . The following effect will be displayed

HTML5 canvas

Finally, the coordinates of the circle given by the arc() method are the center coordinates of the circle.

In the above HTML code, set the drawing part to the following code.

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.arc(cx, cy, radius, 0, 2 * Math.PI, false);
    context.fillStyle = &#39;#9fd9ef&#39;;
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = &#39;#00477d&#39;;
    context.stroke(); 
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(cx, cy);
    context.stroke();
    }

The display effect of the above code is as follows. You can see that the center coordinate is the center of the circle.

The above is the detailed content of How to draw a circle in HTML5 canvas? (code example). 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 a rectangle using HTML5 canvasNext article：How to draw a rectangle using HTML5 canvas

See more

How to draw a circle in HTML5 canvas? (code example)

Related articles