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();