canva之圆的绘制

canvas圆的绘制使用context.arc进行定义,下面看一下arc的参数

                        // context.arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线

// (用于创建圆形或部分圆)

// 参数说明:

// x 圆的中心的 x 坐标。

// y 圆的中心的 y 坐标。

// r 圆的半径。

// sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)

// eAngle 结束角,以弧度计。

// counterclockwise 可选。False = 顺时针,true = 逆时针。

简单绘制圆,代码如下

<canvas id="canvas" width="900" height="500"></canvas>
	<script type="text/javascript">
		var c=document.getElementById('canvas');
		var cv=c.getContext('2d');
			// 		context.arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线
			// (用于创建圆形或部分圆)
			// 参数说明:
			// x 圆的中心的 x 坐标。
			// y 圆的中心的 y 坐标。
			// r 圆的半径。
			// sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)
			// eAngle 结束角,以弧度计。
			// counterclockwise 可选。False = 顺时针,true = 逆时针。
			//创建一个圆
			cv.arc(300,300,150,0*Math.PI/180,360*Math.PI/180);
			cv.fillStyle='yellow';//填充样式
			cv.fill();//填充(闭合)
	</script>

了解上述绘制圆使用arc的属性之后很容易绘制出一个圆,在arc属性定义完毕之后,进行圆的填充声明fillStyle,然后执行填充fill().

注意:arc最后两个参数是安装弧度给定参数,在数学上360°=2π进行换算得出1°=2π/360弧度化简得出1°=π/180弧度

数学不太好,所以要熟练思路,不要按照弧度为单位吗,对于圆的度数咱们就比较数学,然后n°的角是多少弧度,根据上面的一度的弧度(π/180)*n°不就完全ojbk。JavaScript数学对象Math.PI就是数学的π然后进行公式套用就完全ok,n*Math.PI/180就是n度角的弧度。确实这一点也得有点啰嗦了,数学大神略过就好!数学上述过程,预计弧度然后就简简单单可以使用canvas绘制圆了!

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《canva之圆的绘制
分享到:更多

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)