javascript - drawImage 在 IE11 上引发 script65535

Question

我正在制作一个国际象棋游戏，我使用 2 层 Canvas 绘制棋盘和棋子。绘制棋子的一般代码如下所示:

drawPiece = function(ctx,x,y,type,color) {

  var url = getPieceImg(type,color);
  var image = new Image;

  image.onload = function() {
    ctx.drawImage(image,x,y,40,40);
  };

  image.src = url;
};

有一个随机故障导致行 ctx.drawImage(image,x,y,40,40); 崩溃。IE 的控制台向我显示了这一点:(第 805 行是上述行)

SCRIPT65535: Unexpected call to a method or property
File : chess-canvas.html, line : 805, column : 9

我测试了 drawImage 输入的性质和形式，包括 ctx，但它们总是正确的。此外，我可以做两次相同的 Action ，但结果不同。出现故障的几率约为 1/15。

...我意识到带出“检查元素”会将故障发生的几率提高到大约 1/6。...我尝试使用断点进行调试，但错误从未发生。就好像等待输入允许有足够的时间来……做点什么!!

我无法在我的 IE(11、64 位、windows 7)以外的浏览器上重现该故障。

这似乎是一个非常具体的浏览器问题，我不确定它是否属于 StackOverflow。如果是这样的话，我很抱歉……不过，这个故障太奇怪了!

整个代码也在codecademy上找到，问题也很明显； http://www.codecademy.com/TamaYoshi/codebits/5Tm2R1/edit

有什么线索吗？

编辑变通方法:奇怪的问题会产生奇怪的变通方法。我现在在笑；

image.onload = function() {
  try {
    ctx.drawImage(image,x,y,40,40);
  }
  catch (err)
  {
    setTimeout(function() {drawPiece(ctx,x,y,type,color)}, 1);
  }
};

并且有效。但是为什么？!

Answer 1

我在使用 Kineticjs 时遇到了完全相同的问题，我还使用了超时值为 0 的 setTimeout 函数。它适用于 IE9、IE10 和 IE11。和你一样，我不知道为什么会这样。

setTimeout(drawingFunction, 0);

仍在调查以找出根本原因。如果我设法找到根本原因，我会通知您。