Javascript 简单的Html5画布操作会降低浏览器速度

我最近一直在玩canvas，今天开始使用setInterval定期刷新/设置动画。 我很惊讶地看到，这对cpu来说是多么沉重，而且会减慢每件事情的速度。看看网上的例子，我确信我的做法有问题。然后我最大限度地简化了我想做的事情（不是玩图像而是矩形，不是使用太多的对象等等），但仍然遇到了同样的问题

我试着在两个长方形的顶部得到一个白色的闪光（每秒12帧），所以没有什么复杂的事情

这是我的密码

function Canvas(name){
this.ctx=document.getElementById(name).getContext('2d');
this.canvas=this.ctx.canvas;
this.width=this.canvas.width;
this.height=this.canvas.height;
this.layers=new Array();

this.draw = function() {
this.canvas.width = this.canvas.width;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();
    this.ctx.fillStyle="#eaeaea";
    this.ctx.fill();
    this.ctx.beginPath();
    this.ctx.rect(250,50,300,250);
    this.ctx.closePath();
    this.ctx.fillStyle="#ff0000";
    this.ctx.fill();

    intensity=Math.random();
    this.flash(intensity);
 };

this.flash = function(intensity) {
    this.ctx.globalAlpha = intensity;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();
    this.ctx.fillStyle="#fff";
    this.ctx.fill();
    this.ctx.globalAlpha = 1;
    setInterval(this.draw.bind(this),1000);
};

function initCanvas(){
mycanvas=new Canvas('myCanvas');
mycanvas.draw();
}

$(document).ready(function() {
    initCanvas();
});

---

找到的解决方案：

---

使用代替。

关闭您打开的所有路径：

this.draw = function() {
    this.canvas.width = this.canvas.width;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#eaeaea";
    this.ctx.fill();
    this.ctx.beginPath();
    this.ctx.rect(250,50,300,250);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#ff0000";
    this.ctx.fill();

    this.flash(40);
};

this.flash = function(intensity) {
    this.ctx.globalAlpha = intensity;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#fff";
    this.ctx.fill();
    this.ctx.globalAlpha = 1;
    setInterval(this.draw.bind(this),1000);
};

---

关闭您打开的所有路径：

this.draw = function() {
    this.canvas.width = this.canvas.width;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#eaeaea";
    this.ctx.fill();
    this.ctx.beginPath();
    this.ctx.rect(250,50,300,250);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#ff0000";
    this.ctx.fill();

    this.flash(40);
};

this.flash = function(intensity) {
    this.ctx.globalAlpha = intensity;
    this.ctx.beginPath();
    this.ctx.rect(0,0,this.width,this.height);
    this.ctx.closePath();    //Closing
    this.ctx.fillStyle="#fff";
    this.ctx.fill();
    this.ctx.globalAlpha = 1;
    setInterval(this.draw.bind(this),1000);
};

---

由于一直在

flash

功能中使用

setInterval

，因此内存大量泄漏。让我们看一下事件的顺序

• 已创建mycanvas对象
• 画（）
• 抽签通知闪光
• flash设置每秒调用

  draw

  的间隔
• draw调用flash并设置另一个间隔
• 这个过程会不断重复，直到有很多时间间隔调用

  draw

要解决此问题，请使用

flash

中的

setTimeout

。因此，它在一秒钟后调用

draw

，调用

flash

，然后在一秒钟内再次调用

draw

。而且，1000毫秒不会给你12帧的速度。1 000/12将是

另外，使用

ctx.closePath（）

关闭使用

beginPath（）打开的路径

您也从未使用

}

关闭

画布

函数

---

这是一个

由于在

flash

函数中一直使用

setInterval

，您的内存大量泄漏。让我们看一下事件的顺序

• 已创建mycanvas对象
• 画（）
• 抽签通知闪光
• flash设置每秒调用

  draw

  的间隔
• draw调用flash并设置另一个间隔
• 这个过程会不断重复，直到有很多时间间隔调用

  draw

要解决此问题，请使用

flash

中的

setTimeout

。因此，它在一秒钟后调用

draw

，调用

flash

，然后在一秒钟内再次调用

draw

。而且，1000毫秒不会给你12帧的速度。1 000/12将是

另外，使用

ctx.closePath（）

关闭使用

beginPath（）打开的路径

您也从未使用

}

关闭

画布

函数

---

这里有一个

我不知道这是否还相关，但我发现自己也处于类似的情况，我想给出一个更好的答案。 使用

requestAnimationFrame（yourLoop）

，尤其是在游戏中，因为它速度更快，性能更好。

---

我不知道这是否还相关，但我发现自己也处于类似的情况，我想给出一个更好的答案。 使用

requestAnimationFrame（yourLoop）

，尤其是在游戏中，因为它速度更快，性能更好。

---

当然！谢谢我在设置间隔时没有正确阅读。。。1000只用于测试，现在它以25帧/秒的速度运行40次。它工作正常。@user1531617如果这解决了您的问题，请将答案标记为解决方案。当然！谢谢我在设置间隔时没有正确阅读。。。1000只用于测试，现在它以25帧/秒的速度运行40次。它工作正常。@user1531617如果这解决了您的问题，请将答案标记为解决方案。要将答案标记为解决方案，请单击答案旁边的勾号。要将答案标记为解决方案，请单击答案旁边的勾号。