圆形与圆弧

arc()

绘制圆弧或者圆，我们使用arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

• x：圆弧中心（圆心）的 x 轴坐标。
• y：圆弧中心（圆心）的 y 轴坐标。
• radius：圆弧的半径。
• startAngle：圆弧的起始点， x轴方向开始计算，单位以弧度表示。
• endAngle：圆弧的终点， 单位以弧度表示。
• anticlockwise 可选：可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:

radians=(Math.PI/180)*degrees。

实例：canvas-demo/arc.html：

cxt.beginPath();
cxt.arc(70,70,50,0,Math.PI/2,true);
cxt.stroke();

cxt.beginPath();
cxt.arc(180,70,50,0,Math.PI/2,false);
cxt.stroke();

cxt.beginPath();
cxt.arc(300,70,50,0,Math.PI/2,true);
cxt.fill();

cxt.beginPath();
cxt.arc(400,70,50,0,Math.PI/2,false);
cxt.fill();

arcTo()

arcTo()方法用于在画布上创建介于两个切线之间的弧/曲线。

arcTo(x1, y1, x2, y2, radius)

• x1：第一个控制点的 x 轴坐标。
• y1：第一个控制点的 y 轴坐标。
• x2：第二个控制点的 x 轴坐标。
• y2：第二个控制点的 y 轴坐标。
• radius：圆弧的半径。

实例：canvas-demo/arcTo.html：

<canvas id="canvas" width="400" height="300">
		不支持canvas
	</canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = "";
        ctx = canvas.getContext("2d");
		ctx.beginPath();
		ctx.beginPath();
		ctx.moveTo(20,20);           
		ctx.lineTo(100,20);          
		ctx.arcTo(150,20,150,70,50); 
		ctx.lineTo(150,120);         
		ctx.stroke(); 
	</script>