调用clearRect这个方法无效,再绘制时还会保留上次绘制的线条,请问有没有方法解决?
发布于 6 年前 作者 nameng 7114 次浏览 来自 官方Issues

组件:canvas 2D, 基础库:2.10.3;

//页面:

//初始化如下:
createCanvas() {
    const query = wx.createSelectorQuery()
    query.select('#testCanvas').fields({ node: true, size: true }).exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr)
      ctx.lineGap = 'round'
      ctx.lineJoin = 'round'
      ctx.lineWidth = 2
      ctx.font = ' 40rpx  Arial'
      ctx.fillStyle = 'rgba(0,0,0,.3)'
      ctx.fillText("签名区", res[0].width / 2, res[0].height/2)
      this.setData({ ctx, canvas})
    })
  }
// 绘制
start(e) {
    this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  move(e) {
    this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y)
    this.data.ctx.stroke()
 },
//清屏代码如下:
this.data.ctx.clearRect(0, 0, this.data.canvas.width, this.data.canvas.height)

调用完clearRect方法,在进行绘制还是会保留上次的记录。请问这里有没有什么出错的地方或者是2D的bug?怎么解决呢?

1 回复
在start的时候调用beginPath()就可以解决。
回到顶部