Canvas（三）：画各种线

在Canvas中绘制路径，最好加上beginPath()和closePath()。 结合lineTo()绘制不同的路径

closePath()方法创建从当前点到开始点的路径。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
beginPath() 方法开始一条路径，或重置当前的路径。
提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。
提示：请使用 stroke() 方法在画布上绘制确切的路径。

画渐变直线

var canvasGradient = ctx.createLinearGradient(20, 20, 200, 20);
//在offset为0的位置(即起点位置)添加一个蓝色的渐变
canvasGradient.addColorStop(0, "yellow");
//在offset为0.2的位置(线段左起50%的位置)添加一个绿色的渐变
canvasGradient.addColorStop(0.5, "blue");
//在offset为0的位置(即终点位置)添加一个红色的渐变
canvasGradient.addColorStop(1, "red");
//将strokeStyle的属性值设为该CanvasGradient对象
ctx.strokeStyle = canvasGradient;
ctx.lineWidth = 10;
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke(); 
ctx.beginPath();
var canvasGradient01 = ctx.createLinearGradient(20, 50, 200, 20);
canvasGradient01.addColorStop(0, "red");
canvasGradient01.addColorStop(1, "yellow");
ctx.strokeStyle = canvasGradient01;
ctx.lineWidth = 10;
ctx.moveTo(20, 50);
ctx.lineTo(200, 50);
ctx.stroke();

画折线

在绘制图形路径时，一定要先调用beginPath()方法。beginPath()方法将会清空内存中之前的绘制路径信息。

如果，先调用storke()方法，再调用closePath方法时。在调用storke方法时，折线一画好，紧接着调用closePath方法，关闭当前路径；

如果，先调用closePath()方法，再调用storke方法时。在调用closePath方法时，当前路径没有关闭，该方法将会用直线连接当前点和起始点；

      ctx.beginPath();
      ctx.moveTo(20,20);
      ctx.lineTo(50,20);
      ctx.lineTo(50,100);
      ctx.lineTo(100,100);
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.moveTo(120,20);
      ctx.lineTo(150,20);
      ctx.lineTo(150,100);
      ctx.lineTo(200,100);
      ctx.closePath();
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.moveTo(220,20);
      ctx.lineTo(250,20);
      ctx.stroke();
      ctx.closePath();
      ctx.beginPath();
      ctx.lineTo(250,100);
      ctx.lineTo(300,100);
      ctx.stroke();
      ctx.closePath();

画实心线

fill方法，会把路径填充成一个图形。

画网格

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineJoin 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。