如何修复画布 html5 中的性能滞后？

Question

我正在构建一个项目，用户可以在输入文本中键入单词，并使用输入值，画布将粒子绘制到文本上。当鼠标悬停在被推回的粒子上并返回时（核心动画）

但是，性能很糟糕，太慢了，我一直在网上查找，发现帧速率、显示比例、getImageData、putImageData、new Uint32Array()、按位运算符等，但经过数小时的尝试不同我注意到我没有取得任何进展而是陷入更深的事情

我的代码如下，如果有人能告诉我应该去哪里修复它会很棒。

在 index.html 中

<canvas> </canvas>

<form>  
  <input class="text" type="text" value="touch me!" placeholder="type your message.."/>
  <div class="input-bottom"></div>
</form> 

在 app.js 中 - 我没有在表单提交中包含任何代码，因为它工作正常

let canvas = document.querySelector(".canvas")
let canvasContext2d = canvas.getContext("2d") 
let canvasWidth = canvas.width = window.innerWidth
let canvasHeight = canvas.height = window.innerHeight

let form = document.querySelector('form')
let text = form.querySelector(".text")
let textMessage = text.value 

let mouse = {x: undefined, y: undefined}

function Particle(x, y, r, accX, accY){
    this.x = randomIntFromRange(r, canvasWidth-r)
    this.y = randomIntFromRange(r, canvasHeight-r)
    this.r = r
    this.color = "black"
    this.velocity = {
      x: randomIntFromRange(-10, 10), 
      y: randomIntFromRange(-10, 10)
     }
    this.dest = {x : x, y : y}
    this.accX = 5;
    this.accY = 5;
    this.accX = accX;
    this.accY = accY;
    this.friction = randomNumDecimal(0.94, 0.98)


    this.draw = function(){    
     canvasContext2d.beginPath()
     canvasContext2d.arc(this.x, this.y, this.r, 0, Math.PI * 2)
     canvasContext2d.fillStyle = "rgb(250, 250, 247)"
     canvasContext2d.fill()
     canvasContext2d.closePath() 

     // mouse ball
     canvasContext2d.beginPath()
     canvasContext2d.arc(mouse.x, mouse.y, 50, 0, Math.PI * 2)
     canvasContext2d.fill()
     canvasContext2d.closePath()
   }

   this.update = function(){
     this.draw()

     if(this.x + this.r > canvasWidth || this.x - this.r < 0){
          this.velocity.x = -this.velocity.x
      }

    if(this.y + this.r > canvasHeight || this.y - this.r < 0){
         this.velocity.y = -this.velocity.y
      }

    this.accX = (this.dest.x - this.x) / 300;
    this.accY = (this.dest.y - this.y) / 300;

    this.velocity.x += this.accX;
    this.velocity.y += this.accY;

    this.velocity.x *= this.friction;
    this.velocity.y *= this.friction;

    this.x += this.velocity.x;
    this.y += this.velocity.y;

   if(dist(this.x, this.y, mouse.x, mouse.y) < 70){
     this.accX = (this.x - mouse.x) / 30;
     this.accY = (this.y - mouse.y) / 30;
     this.velocity.x += this.accX;
     this.velocity.y += this.accY;
    }
  }
}

let particles;
function init(){
  particles = []

  canvasContext2d.font = `bold ${canvasWidth/10}px sans-serif`;
  canvasContext2d.textAlign = "center"
  canvasContext2d.fillText(textMessage, canvasWidth/2, canvasHeight/2)

  let imgData = canvasContext2d.getImageData(0, 0, canvasWidth, canvasHeight)
  let data = imgData.data

  for(let i = 0; i < canvasWidth; i += 4){
    for(let j = 0; j < canvasHeight; j += 4){
      if(data[((canvasWidth * j + i) * 4) + 3]){
        let x = i + randomNumDecimal(0, 3)
        let y = j + randomNumDecimal(0, 3)
        let r = randomNumDecimal(1, 1.5)
        let accX = randomNumDecimal(-3, 0.2)
        let accY = randomNumDecimal(-3, 0.2)

        particles.push(new Particle(x, y, r, accX, accY))
      } 
    }
  }
} 

function animate(){
  canvasContext2d.clearRect(0, 0, canvasWidth, canvasHeight)
  for(let i = 0; i < particles.length; i++){
    particles[i].update()
  } 
  requestAnimationFrame(animate)
}

init()
animate()

Answer 1

首先，您可以考虑减少全屏像素数的总工作量，例如：

• 减小画布大小（如果必须，可以考虑使用 CSS transform: scale 将其放大），
• 减少粒子数，
• 使用成本较低/精度较低的距离操作，例如仅检查两个对象之间的水平距离和垂直距离，
• 使用整数值而不是浮点数（使用浮点数绘制到画布更昂贵）
• 考虑使用fillRect 而不是绘制圆弧。 （在这么小的尺寸下，它在视觉上不会有太大的不同，但这些通常绘制起来更便宜 - 您可能需要测试它是否有很大的不同），
• 甚至可以考虑减少重绘画布的频率（添加 setTimeout 以包裹 requestAnimationFrame 并增加帧之间的延迟（requestAnimationFrame 通常约为 17 毫秒））

还有一些代码中的小优化：

• 在创建 particles.length 后将它们存储在变量中，这样您就不会在 animate 函数中的每个 for 循环迭代中计算particles.length。但数百万次计算减去这个 2048 并不会产生太大影响。

• 只设置一次上下文fillStyle。你永远不会改变这个颜色，那为什么要在每次绘制时都设置它呢？

• 删除closePath() 行。他们在这里什么都不做。

• 将粒子绘制到屏幕外的“缓冲区”画布上，并且只有在所有粒子都被绘制到它之后才将该画布绘制到屏幕上。这可以使用普通的<canvas> 对象来完成，但根据您使用的浏览器，您也可以查看OffscreenCanvas。基本示例如下所示：

var numParticles;

// Inside init(), after creating all the Particle instances
numParticles = particles.length;


function animate(){
  // Note: if offscreen canvas has background color drawn, this line is unnecessary
  canvasContext2d.clearRect(0, 0, canvasWidth, canvasHeight)
  
  for(let i = 0; i < numParticles; i++){
    particles[i].update() // remove .draw() from .update() method
    particles[i].drawToBuffer(); // some new method drawing to buffer canvas
  }

  drawBufferToScreen(); // some new method drawing image from buffer to onscreen canvas
  requestAnimationFrame(animate)
}