html5 canvas beginPath()

我们都知道beginPath() ,创建路径的第一步便是是调用beginPath方法，返回一个存储路径的信息，注意这只是信息，并没有实质的在画布上做什么。

考虑一下代码

ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(200,400);
ctx.strokeStyle = “red”;
//———–下面2行保留不同效果不同————//
ctx.stroke();
ctx.beginPath();
//———–开启新路径————-//
ctx.moveTo(300,200);
ctx.lineTo(300,400);
ctx.strokeStyle = “blue”;
ctx.stroke();

以上代码的效果就是一条红线和一条蓝线。

1、如果将注释间的代码改为

//ctx.stroke();
ctx.beginPath();

因为第一个路径没有stroke（）或fill（）就开始了第二个路径，所以第一个路径的信息不会被画到画布上，所以只有第二条路径的一条蓝线。

2、如果将注释间的代码改为

ctx.stroke();
//ctx.beginPath();

此时因为第二条线没有开辟一个新的路径，而stroke（）是将画布中同一路径里的信息全部画出，所以第二个stroke（）的效果将叠加于第一个stroke（），即：
第一条线既非红亦非蓝，而是在原来红色的基础上再涂一层蓝色，是混合色。
第二条则是正规的蓝色。

3、如果将注释间的代码改为

//ctx.stroke();
//ctx.beginPath();

此时整体代码只有一个路径、一个stroke()，属于简单类型，stroke()上最接近的strokeStyle值将覆盖之前所有的该属性值（因为之前颜色信息没有画到画布上，所以不会是混合色），即2条蓝线。

转载自：http://taoweb.sourceforge.net/?p=48