html5-canvas

Reference：

http://www.w3school.com.cn/tags/html_ref_canvas.asp

1 初认识canvas.

   (1)设置canvas的宽，高通过，width和height属性，不要通过style属性进行设置，要不然就会bug，里面的绘制的图像大小尺寸会变乱。

2 canvas曲线函数

   （1）二次曲线函数：quadraticCurveTo(x,y,x,y);//第一组x y是控制点的坐标，第二组是终点坐标

(2)弧度，arc(x,y,radius,startAngle,endAngle,antiClockWise),注意此处的开始角度和结束角度都是用弧度表示的，（ps：角度与弧度的换算公式：弧度=角度/180 PI）

(3)切线弧 arcTo(x1,y1,x2,y2,radius)，arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。此处的源码为：

function drawTangent(context){
	context.save();
	context.lineWidth=15;
	context.strokeStyle="#CCFF66";
	context.beginPath();
	context.moveTo(200,200);
	context.arcTo(400,100,50,50,70);
	context.stroke();
	context.lineWidth=5;
	context.strokeStyle="#003399";
	context.moveTo(200,200);
	context.lineTo(400,100);
	context.lineTo(50,50);
	context.stroke();
	context.restore();
}

（2）贝塞尔曲线：bezierCurveTo