IE 中的 HTML5 画布内存问题

Question

我正在使用画布创建一个 HTML5 游戏。在 IE 中运行游戏时出现错误。错误消息是“没有足够的存储空间来完成此操作”。调用 ctx.drawImage 时出现错误。这只发生在游戏快结束时。其他几个图像/精灵在整个游戏中以完全相同的方式绘制，没有任何问题。使用 Chrome 或 Firefox 时不会发生这种情况。有什么建议吗？

这是我的流程：

1) 在游戏开始时，我将几张图片加载到一个名为 Game.sprites 的数组中

var imageObj = new Image();
imageObj.src = assetDir + "Images/myImage.png";
Game.sprites.myAnimation = new AnimatedSpriteSheet(imageObj, 0, 0, 1200, 1200, 4, 14);

我为大约 100 个精灵表执行上述操作

function AnimatedSpriteSheet(img, startX, startY, width, height, imagesPerRow, imageCount){
  this.img = img;
  this.startX = startX;
  this.startY = startY;
  this.width = width;
  this.height = height;
  this.imagesPerRow = imagesPerRow;
  this.imageCount = imageCount;
}


AnimatedSpriteSheet.prototype.draw = function(ctx, posX, posY, width, height, imageIndex){
try{
    //Determine position of image to draw
    var row = Math.floor(imageIndex/this.imagesPerRow);
    var column = imageIndex%this.imagesPerRow;
    ctx.drawImage(this.img, this.startX + (column*this.width), this.startY + (row*this.height), this.width, this.height, posX, posY, width, height);
    return true;
  }catch(err){
    console.log("Error: AnimatedSpriteSheet.draw for image " + this.img.href + " " + err.message);
    return false;
  }
}

2) 在游戏过程中，我将某些图像添加到名为 Game.sceneObjects 的数组中。

Game.sceneObjects.push(new MyAnimationObject("", Game.sprites.myAnimation, Game.cWidth*.3, Game.cHeight*.3, Game.cWidth*.4, Game.cWidth*.4, 0, 2));

function MyAnimationObject(tag, obj, x, y, width, height, startIndex, ticksPerFrame){
  this.tag = tag;
  this.obj = obj;
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.currentIndex = startIndex;
  this.tickCount = 0;
  this.ticksPerFrame = ticksPerFrame;
};

MyAnimationObject.prototype.draw = function(ctx){
  this.obj.draw(ctx, this.x, this.y, this.width, this.height, this.currentIndex);
};

MyAnimationObject.prototype.update = function(){
  this.tickCount += 1;
  if (this.tickCount > this.ticksPerFrame){
      this.tickCount = 0;
      if (this.currentIndex < this.obj.imageCount - 1){
          this.currentIndex += 1;
      }
  }
};

3) 我在 sceneObjects 数组中绘制每个图像

Game.ctx.clearRect(0,0, Game.cWidth, Game.cHeight);
$.each(Game.sceneObjects, function(key, value){
  value.draw(Game.ctx);
});

4) 在新屏幕/场景开始时，我清除对象。

for (var i = 0; i < Game.sceneObjects.length; i++){
    delete Game.sceneObjects[i];
}
Game.sceneObjects = [];

更新：

如果我在中间或中间之后开始游戏，结束没有这个问题。只有当我在中场之前的某个时间开始比赛时。存在某种内存问题，但我无法解决。

Answer 1

您并没有真正清除您的 sceneObjects 数组。

delete 命令只会将指定的数组元素设置为undefined，但不会将其从数组中删除。相当于这个：

// element 5362 equals undefined but is still an element in the array
Game.sceneObjects[5362]=undefined;

相反，将数组长度设置为零。这会导致数组没有元素。

Game.sceneObjects.length=0;

Answer 2

这是因为最大尺寸画布限制。阅读这篇文章canvas size limit。你用的是什么版本的IE？你的解决方案不会超过这个限制（结果画布宽度和高度）