画板clearRect后仍存在之前图像问题
最近遇到的一个问题是:
利用onmousedown等鼠标按钮执行事件,在canvas画布上画出若干个图形后。要求点击某一个具体图形,能够将该图形从画布上清除,但是其他的图形保留不改变。
其他的都没什么问题,但是当点击某个图形进行删除时,利用clearRect()
进行画布清空时,发现画布上的图形仍然存在,说明clearRect()
并没有将画布清除干净。
**经过尝试,发现在clearRect()
语句前加上beginPath()
语句,就能够顺利的将画布清除干净。
关于beginPath()方法:
w3school上对该方法的定义是
HTML5 canvas beginPath() 方法
beginPath() 方法开始一条路径,或重置当前的路径
beginPath() 方法在一个画布中开始子路径的一个新的集合。
beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。
附上之前看到的几篇关于canvas beginPath()的博客:
canvas使用之beginPath()函数踩坑记
HTML5 CANVAS画图 beginPath和closePath
html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解