JS-Canvas的画笔路径问题

JS-Canvas的画笔路径问题

{"作者"："Antoniothefuture"

"关键词"：["JS"，"Canvas"，"JavaScript"，"路径"]

"开发平台"："不限"

"开发语言"："JavaScript"

"简介"： "Canvas的画笔路径需要闭合后，才会保留已经设定的样式"

}

笔者最近在写一个在线绘图的HTML5网页，需要用到JS控制Canvas在网页上绘图，如图，在网页上通过循环画线的方法，画出了一个方格阵列：

接下来我要画一个表示原点的黄色格子，不同颜色，于是我在画完了阵列的代码后面，直接加了画一个格子的代码，用黄色框：

ctx.strokeStyle="#FFFF00";
ctx.moveTo(Ox * sp,Oy * sp);
ctx.lineTo(Ox * sp + sp,Oy * sp );
ctx.lineTo(Ox * sp + sp,Oy * sp + sp );
ctx.lineTo(Ox * sp ,Oy * sp + sp );
ctx.lineTo(Ox * sp ,Oy * sp);
ctx.stroke();

但是马上就出问题了，阵列全部变成了黄色，我慌了，这和我想的不一样啊：

于是我在网上找啊找，终于找到了问题所在，原来，Canvas在每次绘图时，如果路径没有闭合，再次绘图时，就会将图形的样式设置为最后一次所使用的样式。

也就是说，我画完方阵之后，要先 closePath() 闭合路径，然后再  beginPath()  开始画原点的图形，不然的话，前面的方阵的线条颜色会被后面的黄色覆盖掉。

就好比你画画，打好了小兔子的线稿图，先用灰色的笔描了边，然后又画了小老虎的线稿，却又用红色的笔把它们两个都描了边，小兔子和小老虎都是红色的了；你再画一次，告诉自己，小兔子和小老虎的线稿是分开的，给小老虎描边，就不会描到小兔子身上了，这时候你才能得到一只灰色的小兔子和一只红色的小老虎。

我在画原点的代码上补了两段，成功实现：

ctx.beginPath();
ctx.moveTo(Ox * sp,Oy * sp);
ctx.lineTo(Ox * sp + sp,Oy * sp );
ctx.lineTo(Ox * sp + sp,Oy * sp + sp );
ctx.lineTo(Ox * sp ,Oy * sp + sp );
ctx.lineTo(Ox * sp ,Oy * sp);
ctx.closePath();
ctx.stroke();