Question

我正在制作国际象棋游戏，我使用2层画布画出棋盘和棋子。绘制片段的一般代码如下所示：

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，但它们总是正确的。而且，我可以做两次相同的动作，结果各不相同。可能性大概是1/15才会出现故障。

......我意识到要带出来检查元素＆＃39;将故障发生的几率提高到大约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);

仍在调查找到根本原因。如果我设法找到根本原因，我会告诉你。

Answer 2

我的操作系统老师给了我一些关于这个问题的见解。这可能会或可能不会完全解释问题，但它似乎在某种程度上解释了它。

超时会导致操作系统切换到内核模式，或者更确切地说，允许加载下一个可用线程。对于time=0的超时，情况也同样如此;这里唯一的区别是操作系统会在遇到线程时立即选择该线程。

微妙之处在于，如果由于某种原因由于计划错误导致图像未完全加载，请询问fetch back＆＃39;通过切换线程来丢失数据足以解决调度错误。

drawImage在IE11上引发了script65535

2 个答案: