HTML5画布圈教程

最新推荐文章于 2023-04-17 10:22:48 发布

原创最新推荐文章于 2023-04-17 10:22:48 发布 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5画布圈教程

HTML5画布圈教程专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在HTML5画布上使用arc()方法绘制一个圆，包括代码实现和关键参数解释。

与HTML5画布上画一个圆,我们可以创建一个完整的使用arc()方法通过定义角度为0开始和结束角2 * PI。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
    </script>
  </body>
</html>