【坑】html5中使用<canvas>画圆,弧度和角度傻傻分不清楚
2015-07-25 11:45
555 查看
问题导入
<body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas> </body> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 100, 90, 270, true); context.stroke(); context.closePath(); }; </script>
arc方法的参数是这样设置的arc(圆心的横坐标,圆心的纵坐标, 圆的半径,弧的起始角,弧的终止角,true/false(逆时针/顺时针))
这里的起始角是指x轴与弧的起点之间的夹角,终止角是指x轴与弧的终点之间的夹角,这里的夹角单位都是值弧度而不是度
也就是说上面的一个代码显示的不是如下图
而是这样的
造成这样的原因是因为,起始角和终止角的单位都是弧度我们写的90和270浏览器把他当作弧度来计算了,我们把90和270转换成角度可以得出分别是108和357度,正好是上图中下部分的那个起点逆时针距离X轴正方向的角度,终点也是如此。
那么如果我想要起点在90度终点在270度应该怎么做呢,毕竟我们常用的单位是角度而不是弧度
解决办法
很简单,把角度换算成弧度就行,就像这样context.arc(200, 200, 100, Math.PI*90/180, Math.PI*270/180, true);这里的90和270就是我们常用的角度,乘上π/180就是弧度了
相关文章推荐
- 【HTML学习】初识HTML5
- ubuntu14.04 编译hadoop-2.6.0-cdh5.4.4
- ch5 隐藏实施过程
- leetcode Ch5-Linked List
- Swiper滑动Html5手机浏览器自适应
- HTML5 INPUT新增属性
- html5 完整图片上传
- html5之多媒体
- html5画四边形
- html5实现渐变效果
- Html5学习之表单提交
- Html5学习之Form
- HTML5画布(CANVAS)速查简表
- 如何在Ubuntu手机平台中开发Cordova HTML5应用
- HTML5 audio标签的使用
- (转)HTML5游戏如何挣钱?2条经验让你每款赚3万刀
- 关于html5不支持frameset的解决方法
- html5.0与html4的“区别”
- H5点击及focus效果
- Html5之web workers多线程