h5 canvas 背景图上画多个矩形，清除指定的某一个矩形，背景图片不被清除掉。

Question

看的问题的小伙伴 您好
我项目需求的 画多个矩形 并且能够移除指定的某一个
我现在遇到问题是 我点击移除按钮
1 clearRect 清除指定的矩形
2 drawImage 我有重新绘制 指定位置的背景图
问题是 重绘背景图后 canvas画布的背景图上还有边框存在线条变细了

delet(data, index) {
      console.log('移除', data.item)
      let everyD = data.item;
      // everyD[0], everyD[1], everyD[2], everyD[3] 分别是 左上角xy轴坐标 和 矩形宽高
      this.dataArr.splice(index, 1); //删除指定元素
      this.ctx.clearRect(everyD[0], everyD[1], everyD[2], everyD[3]) //清除指定的矩形
      this.ctx.drawImage(this.img, everyD[0], everyD[1], everyD[2], everyD[3], everyD[0], everyD[1], everyD[2], everyD[3])
    },

drawRect(e) {
      let x = this.x;
      let y = this.y;
      // console.log('绘制图形xy值', x, y)

      this.ctx.save() //状态的保存
      this.ctx.beginPath()
      let r = parseInt(Math.random() * 256)
      let g = parseInt(Math.random() * 256)
      let b = parseInt(Math.random() * 256)
      this.ctx.strokeStyle = `rgba(${r},${g},${b})`;
      this.ctx.lineWidth = 1;
      this.ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y);
      this.ctx.restore() //状态的恢复
      }

Answer 1

应该是你的线框比较粗，清除的时候只是把线框内部“刮”了一圈，外圈还在，但线框变细了。
如果问题是这么出来的话，只需要确保擦除和绘的区域始终包含需要擦除的区域即可，当然，最一劳永逸的方法是整个画板都擦除重绘。

---

补充：
全部擦除重绘，重绘的部分不仅包括背景，也包括其他没有被擦除的矩形。
这样做就要求额外维护一些变量来记住页面的所有元素，所有基于 canvas 的绘图引擎都是这个原理，因为 canvas 不支持对象化的管理，楼下给的方案也是这个原理。
所以我觉得你还不如找一个绘图引擎，我用过 zRender，还不错，主要因为它是由中国人开发的，中文文档比较友好。

---

继续补充：zrender 没有官网，其文档托管在了 github，但是近来 github.io 的二级域名被大面积停止解析了，如果不能科学上网的话，可以使用 Konva 来代替。

Answer 2

不要把位图与多边形数据看成是一体的，你在原有的位图数据上画画，经过一系列像素混合后再想把它擦干净就难了。

正确的做法是 drawImage 然后根据矢量数据(这里是你的矩形) 画图，每次操作的是数据，而不是直接操作画布。

先保证每次数据的改动之后都有一次完整的绘图，然后在这个基础上想办法优化（如果有必要的话）

Answer 3

我觉得你可以搞两个canvas，然后在上面空白的canvas去搞这些操作，或者直接backgroundImage

Answer 4

如果只是简单的 矩形框，可以 canvas 上绝对定位一个 div，这个 div 里放 div 模拟矩形框
剩下的就只是 dom 操作了