【坑】html5中使用<canvas>画圆，弧度和角度傻傻分不清楚

最新推荐文章于 2023-04-22 00:12:23 发布

_Slience_

最新推荐文章于 2023-04-22 00:12:23 发布

阅读量2.2w

点赞数 3

分类专栏： Web前端

本文链接：https://blog.csdn.net/u010513756/article/details/47054763

版权

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

问题导入

<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就是弧度了

_Slience_

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
【坑】html5中使用<canvas>画圆，弧度和角度傻傻分不清楚

问题导入window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 100, 90, 270, true); co
复制链接

扫一扫

专栏目录