在研究canvas的过程中,突然遇到一个让我很纠结的问题,废话不说,看代码和结果:
本来想做个定位canvas绘制的图形中心的东西,按照上面的代码逻辑来说,点击location的时候,canvas的中心平移到矩形的中心,但第一次触发,重绘的结果矩形中心确实在canvas的中心了,但是在原点绘制的圆缺出问题了,如图:
再触发这个函数,矩形的中心还会平移,但是圆就会出现3、4、5....个,后面查来查去,死活找不到原因,终于想起来之前学习的时候就没注意benginPath这个看起来没什么鸟用的函数,搜索之后果然这里有坑。canvas里面的绘制函数(stroke,fill等等),都是以上次的路径为基础进行绘制的,我这里本来没有设置beginPath,结果不断重绘的过程中fill的时候,所有额圆都是在一次路径里面,所以fill的结果是将历史绘制的圆都显示出来。还有closePath这个函数,看到好多以beginPath共同出现,其实这两个没有想象中的关系,closePath只是将路径中的起点和终点闭合起来,并不能结束这次路径绘制。所以这里每次绘制圆的时候,都beginPath一下就能避免这种情况了。