[HTML5].Canvas.easel.js.arc.arcTo 绘制弧线

easeljs的arcTo参数说明：

Graphics.ArcTo (

    x1 y1 x2 y2 radius

)

Defined in Graphics.ArcTo:1684
Parameters:

    x1 Number
    y1 Number
    x2 Number
    y2 Number
    radius Number

试了一下这个API，非常蛋疼的存在。CAD绘图中经常给出弧线上的两点及该弦对应的圆心角，这样使用才方便：

辅助数据结构：

function xyObj(x,y){
	this.x=x;
	this.y=y;
}

辅助函数GetCircle根据两点和角确定圆心和半径，原理是是复数向量运算，DrawArc根据圆上两点和圆心角绘制弧线：

function GetCircle(pA,pB,angle,center) {
	angle*=Math.PI/180;
	var dx=pA.x-pB.x,dy=pA.y-pB.y;
	var halfStringLen=Math.sqrt(dx*dx+dy*dy)/2;//半弦长
	var radius=halfStringLen/Math.sin(angle/2);
	radius=Math.abs(radius);
	var P1=new xyObj(pA.x,pA.y);
	var P2=new xyObj((pA.x+pB.x)/2,(pA.y+pB.y)/2);
	var cplx=new xyObj(P2.x-P1.x,P2.y-P1.y);
	var angle=(Math.PI-angle)/2+Math.atan2(cplx.y,cplx.x);
	cplx.x=radius*Math.cos(angle);
	cplx.y=radius*Math.sin(angle);
	center.x=cplx.x+P1.x;
	center.y=cplx.y+P1.y;
	return radius;
}

function DrawArc(p1,p2,angle,cmd){
	var center=new xyObj();
	var radius=GetCircle(p1,p2,angle,center);
	//console.log(center,radius);
	var startAngle=Math.atan2(p1.y-center.y,p1.x-center.x);

	cmd.arc(center.x,center.y,radius,startAngle,startAngle+angle*Math.PI/180);
}

用法：

        var p1=new xyObj(100,200);
	var p2=new xyObj(300,200);
	var angle=90;
	var holder=new createjs.Shape();
	stage.addChild(holder);
	DrawArc(p1,p2,angle,holder.graphics);

值得注意的是，函数DrawArc前两个点顺序不同会绘制出两个结果：“方向相反的圆弧”