关于CANVAS画圆的弧度角度问题--转载自Slience

http://blog.csdn.net/u010513756/article/details/47054763

问题导入


[html]  view plain  copy
 print ?
  1. <body>  
  2. <canvas id="myCanvas" width="400" height="400" style="border:1px solid">canvas>  
  3. body>  
  4. <script>  
  5. window.onload = function(){  
  6.     var canvas = document.getElementById("myCanvas");  
  7.       
  8.     var context = canvas.getContext("2d");  
  9.     context.beginPath();  
  10.     context.arc(100, 100, 100, 90, 270, true);  
  11.     context.stroke();  
  12.     context.closePath();  
  13. };  
  14. script>  

arc方法的参数是这样设置的arc(圆心的横坐标,圆心的纵坐标, 圆的半径,弧的起始角,弧的终止角,true/false(逆时针/顺时针))
这里的起始角是指x轴与弧的起点之间的夹角,终止角是指x轴与弧的终点之间的夹角,这里的夹角单位都是值弧度而不是度
也就是说上面的一个 代码显示的不是如下图
关于CANVAS画圆的弧度角度问题--转载自Slience_第1张图片
而是这样的
关于CANVAS画圆的弧度角度问题--转载自Slience_第2张图片
造成这样的原因是因为,起始角和终止角的单位都是弧度我们写的90和270浏览器把他当作弧度来计算了,我们把90和270转换成角度可以得出分别是108和357度,正好是上图中下部分的那个起点逆时针距离X轴正方向的角度,终点也是如此。
那么如果我想要起点在90度终点在270度应该怎么做呢,毕竟我们常用的单位是角度而不是弧度

解决办法

很简单,把角度换算成弧度就行,就像这样
[javascript]  view plain  copy
 print ?
  1. context.arc(200, 200, 100, Math.PI*90/180, Math.PI*270/180, true);  
这里的90和270就是我们常用的角度,乘上π/180就是弧度了


你可能感兴趣的:(关于CANVAS画圆的弧度角度问题--转载自Slience)