HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了【坑】html5中使用<canvas>画圆,弧度和角度傻傻分不清楚大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

问题导入

<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,90,270,truE);
	context.stroke();
	context.closePath();
};
</script>

arc方法的参数是这样设置的arc(圆心的横坐标,圆心的纵坐标,圆的半径,弧的起始角,弧的终止角,true/false(逆时针/顺时针))
这里的起始角是指x轴与弧的起点之间的夹角,终止角是指x轴与弧的终点之间的夹角,这里的夹角单位都是值弧度而不是度
也就是说上面的一个 代码显示的不是如下图

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


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


造成这样的原因是因为,起始角和终止角的单位都是弧度我们写的90和270浏览器把他当作弧度来计算了,我们把90和270转换成角度可以得出分别是108和357度,正好是上图中下部分的那个起点逆时针距离X轴正方向的角度,终点也是如此。
那么如果我想要起点在90度终点在270度应该怎么做呢,毕竟我们常用的单位是角度而不是弧度

解决办法

很简单,把角度换算成弧度就行,就像这样
context.arc(200,200,Math.PI*90/180,Math.PI*270/180,truE);
这里的90和270就是我们常用的角度,乘上π/180就是弧度了

大佬总结

以上是大佬教程为你收集整理的【坑】html5中使用<canvas>画圆,弧度和角度傻傻分不清楚全部内容,希望文章能够帮你解决【坑】html5中使用<canvas>画圆,弧度和角度傻傻分不清楚所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。