没有关闭路径和move to和Link to

没有关闭路径：

步骤：

1.创建并且绘制第一个圆

2.创建并且绘制第二个圆：

这个时候，由于没有关闭第一个圆的路径，所以第一个圆的路径也保留着，绘制第二个圆的时候，第一个圆会根据该路径重复绘制，第二个圆只绘制一次，而第一个圆绘制了两次

3.创建第三个圆的时候，绘制的时候，第三个圆绘制了一次，第二个圆绘制了两次，第一个圆绘制了三次

4.继续上面的步骤...............

不仔细对路径进行管理的话，会绘制出意想不到的图形

function draw(id)
{
	var canvas=document.getElementById(id);
	if (canvas==null)
		return false;
	var context=canvas.getContext('2d');
	context.fillStyle='#EEEEFF';
	context.fillReact(0,0,400,300);
	var n=0;
	for(var i=0;i<10;i++)
	{
		context.arc(i*25,i*10,0,Math.PI*2,true);
		context.fillStyle='rgba(255,0,0,0.25)';
		context.fill();
	}

move To和line To:

绘制直线的时候，一般会用到两种方法，moveto和lineto

move To:它的作用是将光标移动到指定的坐标点，绘制直线的时候以这个坐标点位起点，这个方法的定义如下：moveto(x,y);      x是指定坐标点的横坐标，y是指定坐标点的纵坐标

lineto:它的作用是在moveto方法中指定的直线起点和参数中指定的直线终点之间绘制一条直线，这个方法的定义式：lineto(x,y);    x表示直线终点的横坐标，y表示直线终点的纵坐标，使用这个方法绘制完直线后，光标自动移动到Lineto方法的参数指定的直线终点

    在创建路径的时候，需要使用moveTo方法将光标移动到指定的直线起点，然后使用lineto方法在直线起点和直线终点之间创建路径，然后将光标移动到直线终点，在下一次使用lineto方法的时候，会以当前光标所在的坐标点为直线起点，并在下一个用lineTo方法指定的直线终点之间创建路径，它会不断的重复这个过程，用来完成复杂图形的绘制

绘制复杂图形：在这个例子中，使用三角函数计算顶点，循环调用lineto语句来绘制图形，最后一个坐标点和第一个坐标点自动闭合

function draw(id)
		{
			var canvas=document.getElementById(id);
			if (canvas==null)
				return false;
			var context=canvas.getContext('2d');
			context.fillStyle="EEEEFF";
			context.fillReact(0,0,400,300);
			var n=0;
			var dx=150;
			var dy=150;
			var s=100;
			context.beginPath();
			context.fillStyle='rgb(100,255,100)';
			context.strokeStyle='rgb(0,0,100)';
			var x=Math.sin(0);
			var y=Math.cos(0);
			var dig=Math.PI/15*11;
			for(var i=0;i<30;i++)
			{
				var x=Math.sin(i*dig);
				var y=Math.cos(i*dig);
				context.lineTo(dx+x*s,dy+y*s);

			}
			context.closePath();
			context.fill();
			context.stroke();

使用bezierCurveTO方法绘制贝济埃曲线：

这个方法可以说是lineTo的方法的升级版，将从当前坐标点到指定坐标点中间的贝济埃曲线追加到路径中，这个方法的定义如下

context.bezierCurve To(cplx,cply,cp2x,cp2y,x,y);这个方法使用了6个参数，需要两个控制点，cplx为第一个控制点的横坐标，cply为第一个控制点的纵坐标；cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标；x为贝济埃曲线的终点横坐标，y为贝济埃曲线的终点纵坐标