需求
在某个canvas业务中,循环点击不同区块,可以依次在相应区块绘制“对号”,当绘制下一个“对号”的时候,清除上一个“对号”
问题重现
代码描述:
初始化时将源canvas通过putImageData保存到变量中,通过canvas.onmousedown来不断触发putImageData来重绘画布,在每次onmousedown结束的时候调用stroke()和strokeRect()。
理想状态:
每次stroke()和strkoeRect()的内容都在下一次onmousedown刚开始的时候被清除
实际效果:
仅strkoeRect()的绘制内容被清除,stroke()的内容仍然被留在旧画布上。
问题解决
在每次stroke()之前的绘制步骤前(包括lineTo等绘制路径的API)。使用**context.beginPath()**进行清除旧路径
原因分析
lineTo()等绘制路径的API会创建路径,如果不使用beginPath(),则会在后续的路径绘制上叠加“之前的路径”,导致最后执行stroke()的时候,实际上时同时描边了“多个路径的集合”。
而strokeRect是不通过Path路径来而直接绘制在画布上的,跳过了路径的概念,所以不会产生这种效果