canvas各种渐变填充以及，贝塞尔曲线

渐变填充
’”基本步骤"
水平渐变，通过设置颜色段点来控制渐变颜色

• 水平渐变必须保持y值为0
• var gr=context.createLinearGradient(0,0,100,0);*
• 添加颜色断点
• gr.addColorStop(0,‘rgb(255,0,0)’);
  gr.addColorStop(.5,‘rgb(0,255,0)’);
  gr.addColorStop(1,‘rgb(255,0,0)’)
• 应用filldtyle生成渐变
  context.fillStyle = gr;
• 绘制基本方形
  context.fillRect(0, 0, 100, 100);
  //垂直渐变填充

保持X为0

对角线渐变填充
   var gr=context.createLinearGradient(0,0,150,150);

径向渐变填充
径向渐变6个参数1 2为第一个圆的圆心坐标，3为第一个圆的半径 4 5为第二个元的圆心坐标 6为第二个元的半径
复杂径向填充

var gr=context.createRadialGradient(100,100,50,200,200,200);
        gr.addColorStop(0,'blue');
		  gr.addColorStop(.5,'white');
		  gr.addColorStop(1,'blue');
	   
	   context.fillStyle=gr;
	    context.arc(200,200,200,(Math.PI/180)*0,(Math.PI/180)*360,false);
	    context.fill();

1. arc() 方法创建弧/曲线（用于创建圆或部分圆）。

2. 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

3. 提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
   弧线
   /*弧线
   * context.arc(x,y,radius,starAnglr,endAngle,anticlockwise)
   * x,y表示圆心的位置，radius定义弧线的半径，starAngle和endAngle使用弧度制，而不是角度值
   * anticlockwise的值可以false/true用于定义弧线的方向
   * 0-90如果anticlockwise的值为true则为90-360
   * */
   从v
   3/4的圆环

context.beginPath();
		context.strokeStyle='black';
		context.lineWidth=5;
		context.arc(100,100,20,(Math.PI/180)*0,(Math.PI/180)*90,true);
		context.stroke();
        context.closePath();

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。
context.quadraticCurveTo(cpx,cpy,x,y)cpx,cpy控制弧线的点

context.beginPath();
		context.strokeStyle='gold';
		context.lineWidth=5;
		context.moveTo(500,500);
		context.quadraticCurveTo(600,800,700,500);
		context.stroke();
        context.closePath();

贝塞尔曲线 context.bezierCurveTo(cp1x,c91y,co2x,cp2y,x,y);
‘cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标’
例如

 context.beginPath();
		context.strokeStyle='gold';
		context.lineWidth=6;
		context.moveTo(150,0);
		context.bezierCurveTo(0,125,300,175,150,300)
		context.stroke();
        context.closePath();