context.moveTo(100,200) context.lineTo(300,200) context.strokeStyle = "red" context.stroke() context.moveTo(400,500) context.lineTo(500,500) context.strokeStyle = "blue" context.stroke()

//结果都为蓝色 因为第二个context.stroke() 把第一个context.stroke() 覆盖了 应在两段代码之间加上 context.beginPath()  

2.5图形变换

这里save();和restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下:

  　　当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响。

还有 变换矩阵 :

　　其中transform()   级连

　　而setTransform() 不级连，将之前状态变为默认状态，再进行设置。

2.6填充样式

　　2.6.1渐变

　　　　step 3

　　　　　　context.fillStyle = grd;

　　　　　注意：记得加路径

2.6.2模式