canvas学习（九）：使用arcTo绘制一轮弯月

arcTo()函数讲起来有点绕，也不太好懂，大家可以先去这里了解了解，我就不多说了。

先上个效果图：

 

再来个分析图：

（PS：

1、图中各个坐标点为假设点，作为一个特例来说，大家可以试着先写这个特例，再总结出通用方法。老师讲这个的时候，就是先做的特例，然后分析通用。我也是按照这个来的，通过特例慢慢的通用就出来了。

2、不得不佩服老师的讲学方法，什么虚的都能被他整成实的来给大家分析，佩服老师感谢老师，向老师学习）

 

最后上代码：

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;;
		myCanvas.height = document.documentElement.clientHeight-20;;
		var context =myCanvas.getContext("2d");
		drawMoon(context,400,400,200,0,2);
	}else{
		return false;
	}
}

/**
*该方法用来绘制一轮弯月
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param R:大圆半径
@param rot:旋转角度
*@param d:两条直线在x轴的切点坐标（d越大绘制出来的月亮越弯，越小绘制出来的越圆，当d为0时绘制一个半圆，当d为负数时绘制不出圆）
*@param fillColor:弯月的填充色
*@param 
**/
function drawMoon(cxt,x,y,R,rot,d,/*optional*/fillColor){
	if(d<0) return false;
	if(d>20) return false;
	cxt.save();

	cxt.translate(x,y);//设置绘图开始位置，也就是(0,0)的位置
	cxt.rotate(rot*Math.PI/180);//旋转绘图(将角度转换成弧度)
	cxt.scale(R,R);//缩放绘图的宽度和高度

	//绘制弯月图形
	strokeMoonPath(cxt,d);
	
	cxt.fillStyle = fillColor||"#fb5";
	cxt.fill();

	cxt.restore();
}

/**
*该方法用来绘制弯月的轮廓
*(这里的直角坐标系为：x轴正方向向右，y轴正方向向下，且圆心所在为x轴和y轴中心点,也就是(0,0)的位置)
*（这里在(0,0)的地方绘制一个小绘图，再通过translate进行位移，通过scale进行放大）
*@param cxt:canvas的上下文环境
*@param d:两条直线在x轴的切点x坐标
**/
function strokeMoonPath(cxt,d){
	cxt.beginPath();
	//1、先绘制大圆的圆弧：从0.5PI到1.5PI，逆时针绘制
	//arc方法最后一个参数为“是否逆时针绘制”，值为false，因此默认的是顺时针
	//这里设置成true，就是逆时针绘制
	cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);

	//2、将起点移动到大圆弧最顶点(x0,y0)(分析图A点坐标)
	//此时圆心坐标为(0,0)，那么大圆最顶点的坐标为(0,-1)
	cxt.moveTo(0,-1);

	//3、设置(x1,y1)和(x2,y2)两个点,从(x0,y0)到(x1,y1)，从(x1,y1)到(x2,y2)形成两条直线，进而使用arcTo()函数计算切点绘制圆弧
	//(0,-1):分析图中A点坐标
	//(d,0):分析图中C点坐标
	//(0,1):分析图中B点坐标
	//dis计算出AC的长度，而r=(AH*AC)/HC且AH为大圆半径1，HC为C点的横坐标也就是d
	var r = 1*dis(0,-1,d,0)/d;
	cxt.arcTo(d,0,0,1,r);
	
	cxt.closePath();
}
/**
*该方法用来计算第三条边的长度，使用勾股定理进行计算
*@param x1:第一个点的横坐标
*@param y1:第一个点的纵坐标
*@param x2:第二个点的横坐标
*@param y1:第二个点的横坐标
**/
function dis(x1,y1,x2,y2){
	return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}

 
感谢老师的分享！