0

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

我试图在两个矩形上获得一个白色闪光灯（12fps）......所以一点也不复杂......

这是我的代码。

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();
});

找到的解决方案：

使用setTimeout而不是setInterval。

4

3 回答 3

2

你有大量的内存泄漏，因为你一直setInterval在flash函数中使用。让我们看看事件的顺序

  • 已创建 mycanvas 对象
  • 画（）
  • 绘制调用闪光
  • drawflash 设置每隔一秒调用一次的时间间隔
  • draw 调用 flash 并设置另一个间隔
  • 过程重复，直到你有很多间隔调用draw

要解决它，请使用setTimeoutin flash。所以它draw在一秒钟后调用，它调用flash，然后draw在一秒钟内再次调用。此外，1000ms 不会给你 12fps。1000/12 将。

此外，用于ctx.closePath();关闭您打开的路径beginPath()

您也从未Canvas使用}.

这是一个演示

于 2012-07-17T12:04:16.447 回答
2

关闭您打开的所有路径：

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);
};
于 2012-07-17T11:59:30.910 回答
0

我不知道这是否相关，但我发现自己处于类似情况并想给出更好的答案。使用requestAnimationFrame(yourLoop)，特别是对于游戏，因为它更快并且具有更好的性能。 http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

于 2016-04-20T01:59:41.477 回答