How to draw a circle in HTML5 canvas? (code example)-H5 Tutorial-php.cn

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

不言

Release： 2018-12-04 10:51:29

Original

8788 people have browsed it

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>

Copy after login

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();
    }

Copy after login

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!