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绘制圆了!