HTML5画布弧教程

最新推荐文章于 2021-06-19 03:24:01 发布

limeiyans

最新推荐文章于 2021-06-19 03:24:01 发布

阅读量870

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5画布弧教程文章标签： HTML5画布弧教程

本文链接：https://blog.youkuaiyun.com/limeiyans/article/details/19249641

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

1 篇文章

订阅专栏

创建一个弧与HTML5画布,我们可以使用arc()方法。弧是由一个中心点,一个半径,一个角开始,结束角和绘图方向(顺时针或逆时针方向)。弧可以设置样式lineWidth,strokeStyle,lineCap属性。

弧形只不过是一段虚圆的周长。这种虚圆可以定义为x,y,和半径。
接下来,我们可以定义弧本身有两个点定义的虚圆的周长startAngle endAngle。这两个角度定义的弧度,形成虚行,来自中心的圆和相交的弧,我们希望创建。
弧方法的最后一个参数是定义弧的方向逆时针方向路径之间的两个终点。除非另有规定,这个论点是违约为false,这导致电弧顺时针。

注意:另外,我们也可以创建一个使用arcTo()用于创建圆角的路径。点击这里阅读更多。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>