当w / h增加1px时，Canvas clearRect性能差异很大

Question

我看到一个非常奇怪的画布clearRect性能问题。

在我们的游戏中，当前的移动使用一个小的白色正方形7px * 7px渲染。

移动结束后，使用clearRect(x, y, 7, 7)函数移除方块。

这样做很好，但留下了一个奇怪的白色轮廓。我认为这是亚像素舍入：

我可以通过发出不同的clearRect来电来解决这个问题，特别是clearRect(x, y - 1, 8, 8)这会删除白色residue哪种确认子像素理论，但出于某种原因，性能更糟糕的是。

这是最初的7 * 7明确：https://www.useloom.com/share/9b6bbd00647a4803ad5d0a8a4ce77d3a

这是8x8清晰： https://www.useloom.com/share/c36f7b2e81e74d1d9bfd9e16124a7503

我真的应该看到这么小的变化吗？

为了把事情放到上下文中，每一帧我有一系列messages来渲染（彩色正方形/十字形），这些可以是1-2000。我还需要以不同的颜色（在不同的画布上）呈现当前消息。

所以我有一个函数renderMessages负责每帧渲染每条消息。

  renderMessages() {    

    this.messages.forEach((data) => {
      this.renderCurrentTask(data)
      this.renderCell(data)
    })

    this.messages = []

    window.requestAnimationFrame(() => this.renderMessages())
  }

我正在绘制然后清除画布的函数是renderCurrentTask。结果当我尝试使用像clearRect(0,0,w,h)那样简单的东西时，我看到了糟糕的性能，因为我不得不称它为每帧2000个。

如果在诊断时有任何帮助，我的renderCurrentTask功能会导致小clearRect更改产生负面影响：

  renderCurrentTask(data) {

    if(this.lastCoordinates) {

      this.interactiveContext.clearRect(this.lastCoordinates.x,
        this.lastCoordinates.y,
        this.lastCoordinates.wh,
        this.lastCoordinates.wh)
    }

    const coordinate = this.addressToScreenCoordinate(data.address)

    this.interactiveContext.fillStyle = '#ffffff'

    this.interactiveContext.fillRect(
      coordinate.x,
      coordinate.y,
      this.cellSize,
      this.cellSize)

    this.lastCoordinates = {
      x: coordinate.x,
      y: coordinate. y - 1,
      wh: this.cellSize + 2
    }

  }

Answer 1

如果您的画布游戏在尝试使用不同方法进行优化后仍存在性能问题，则可以尝试使用webgl渲染器。我建议使用库来使用webgl渲染2d，例如Pixi.js。这个解决方案可能需要大量重写您当前的代码。