只清理画布上的部分绘图

Question

我看到您可以使用CanvasRenderingContext2D.clearRect 清除部分画布。此功能将根据指定的坐标清除全部/部分画布。是否可以清除一些前景图，但保持背景图完整？

在反应组件内部，我有以下内容

  componentDidMount() {
    this.canvas = this.canvasRef.current;
    this.c = this.canvas.getContext('2d')

    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight

    window.addEventListener('resize', this.resize)

    this.init() 
    this.backgroundGradientAnimate() //draw background gradient
    window.requestAnimationFrame(this.step)

  }

  // generate stars
  init = () => {
    this.stars = []

    for (let i = 0; i < 150; i++) {
      const x = Math.random() * this.canvas.width;
      const y = Math.random() * this.canvas.height
      const r = Math.random() * 3
      this.stars.push(new Star(x, y, r, 'white'))
    }
  }

  draw = (star) => {
    this.c.save()
    this.c.beginPath()
    this.c.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false)
    this.c.fillStyle = this.getRandomColor()
    this.c.fill();
    this.c.closePath();
    this.c.restore()
  }

  starsAnmiate = () => {
    this.stars.forEach(star => this.draw(star))
  }

  // only animate in such time
  step = (elapsedTime) => {
    let delta = elapsedTime - this.lastFrameTime || 0

    window.requestAnimationFrame(this.step)

  if (this.lastFrameTime && delta < 1000) {
    return;
  }

  this.lastFrameTime = elapsedTime

  this.starsAnmiate();
  }

问题是动画重复后所有的星星都不会消失。有没有办法只清理星星的画，但保留backgroundGradient，或者两张画总是必须同时清理，因为它们位于同一个画布上？

总的来说，我正在尝试创建这些星星的闪烁效果。当我每次都需要清理/重绘整个画布来模拟每颗星星的闪烁时，这似乎是很多开销。

[编辑]

1. 为了优化动画效果，您可以将 2 个单独的画布绘制为 HERE

Answer 1

有几种方法可以做到这一点，但它们都涉及使用某种解决方法。

从本质上讲，这听起来像是您希望在单个画布上拥有多个层，这样您就可以从一个而不是其他的中擦除。不幸的是，没有允许您执行此操作的本机功能。

画布被设置为具有一个（且只有一个）上下文，2D 或 3D。当您在上下文中绘制时，您会更改构成该画布的各个像素的颜色。 JavaScript 不知道某个绘图下面是什么，因为它直接对画布的每个像素进行更改（您也可以争辩说 JS 甚至没有 绘图 的概念，但事实并非如此在这里特别重要）。

如果你想拥有多个独立支持擦除的层，你可以做以下两件事之一，这两者都有缺点：

• 将多个画布元素堆叠在一起并单独修改每个元素。请注意，使用此方法，您将无法一次轻松导出所有画布的内容。
• 为每一层维护一个像素的一维Uint8ClampedArray，并直接使用ctx.putImageData以分层顺序绘制每个数组。使用类型化数组比原始数组更快，但它的数据结构在概念上有点不稳定。您可以阅读有关此方法的更多信息 here 和 here。