Canvas 画圆

爱被打了一巴掌 2021-12-15 11:55 416阅读 0赞

## 原文地址：http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b ##

\----------------------------------------------------------------------------------------------

## Canvas 画圆 ##

W3School中对Canvas的画圆方法的描述如下：

语法

arc(x, y, radius, startAngle, endAngle, counterclockwise)

x, y 描述弧的圆形的圆心的坐标。

radius 描述弧的圆形的半径。

startAngle,

endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。

counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。描述

1. 我想很多人对startAngle和 endAngle两个参数不是很理解，我也是，经过摸索有了一点头绪，总结如下：

startAngle： 沿着 X 轴正半轴的三点钟方向的角度为 0，其实说白了很简单，如下图：

![d50735fae6cd7b893b6730420f2442a7d8330ee3.jpg][]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>ctx.fillStyle=grd;</code> 
     </div> 
     <div> 
      <code>ctx.beginPath();</code> 
     </div> 
     <div> 
      <code>ctx.arc(150,50,50,0,Math.PI/2,</code> 
      <code>false</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>ctx.closePath();</code> 
     </div> 
     <div> 
      <code>ctx.fill();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个图片的0度角就是图中圆的半径与X轴右方向的夹角，所以顺时针画出来的圆就是上面的效果

2. 角度的表示：在我上面的代码中角度是Math.PI/2，初看可能不明白，其实仔细看一下就会想起来，这个是弧度，不明白就百度吧。

那么如果我按照角度写会如何呢？

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>ctx.beginPath();</code> 
     </div> 
     <div> 
      <code>ctx.arc(150,50,50,0,360,</code> 
      <code>true</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>ctx.closePath();</code> 
     </div> 
     <div> 
      <code>ctx.fill();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

分别打开IE9,FF，Chrome看一下，奇怪的事情发生了：

IE9 和FF:

![8435e5dde71190ef3feee61ece1b9d16fcfa60dd.jpg][]

Chrome:

![b21c8701a18b87d6f351dfde070828381e30fde4.jpg][]

不知道到底是什么原因，既然不知道原因，那么我们还是老老实实的使用弧度吧

转载于:https://www.cnblogs.com/jcz1206/p/3540732.html

[d50735fae6cd7b893b6730420f2442a7d8330ee3.jpg]: /images/20211214/3d4acc10f02c49f88fb4d8c159b0a5f4.png
[8435e5dde71190ef3feee61ece1b9d16fcfa60dd.jpg]: /images/20211214/d7d87b23abcc45589c7a642396051bea.png
[b21c8701a18b87d6f351dfde070828381e30fde4.jpg]: /images/20211214/0590966592c14051af381542499d7964.png