Javascript drawImage在IE11上引发脚本65535
我在下国际象棋,我用两层帆布画棋盘和棋子。 绘制片段的常规代码如下所示:Javascript drawImage在IE11上引发脚本65535,javascript,Javascript,我在下国际象棋,我用两层帆布画棋盘和棋子。 绘制片段的常规代码如下所示: 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; }; 有一个随机的小故障,使
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(图像,x,y,40,40)代码>崩溃。
IE的控制台显示:(第805行是前面提到的行)
我测试了drawImage
输入的性质和形式,包括ctx,但它们总是正确的。此外,我可以做两次相同的动作,但效果不同。发生故障的几率约为1/15
…我意识到,推出“inspect element”会增加大约1/6发生故障的几率。
…我尝试使用断点进行调试,但错误从未发生。好像等待输入有足够的时间。。。有些事
除了我的IE(1164位,Windows7),我无法在其他浏览器上重现这个小故障
这似乎是一个非常具体的浏览器问题,我不确定它是否属于StackOverflow。如果是这样的话,我很抱歉。。。不过,这个小故障太奇怪了
整个代码也可以在codecademy上找到,在codecademy上也可以看到问题
有什么线索吗
编辑解决方法:奇怪的问题会导致奇怪的解决方法。我现在在笑
image.onload = function() {
try {
ctx.drawImage(image,x,y,40,40);
}
catch (err)
{
setTimeout(function() {drawPiece(ctx,x,y,type,color)}, 1);
}
};
它是有效的。但为什么 我在Kineticjs中遇到了完全相同的问题,我还使用了超时值为0的setTimeout函数。它在IE9、IE10和IE11中工作。和你一样,我也不知道为什么它会起作用
setTimeout(drawingFunction, 0);
仍在调查以找到根本原因。如果我能找到根本原因,我会让你知道。我的操作系统老师给了我一些关于这个问题的见解。
这也许可以完全解释问题,也可能不能完全解释问题,但似乎在某种程度上可以解释问题
超时导致操作系统切换到内核模式,或者更准确地说,以允许加载下一个可用线程。这同样适用于超时time=0
;这里唯一的区别是操作系统会在遇到线程时立即选择它
微妙之处在于,如果出于某种原因,图像由于调度错误而未完全加载,通过切换线程请求“取回
”丢失的数据就足以修复调度错误。您确定图像url必须是类型和颜色,什么是getPieceImg()?getPieceImg()
返回正确类型和颜色的图像的url(不是内置函数)。碎片显示良好,所以这不是问题。碎片显示良好,所以这不是问题。
对我来说这听起来像是一个毫无根据的假设。我刚刚找到了一个解决方法,表明这个问题有多奇怪;我无法理解getPieceImg()
如何无法工作;它所做的只是返回一个URL。它一直在工作;这里的问题实际上与drawImage有关。我甚至调试了“url”,不管怎样,它的值是正确的。
setTimeout(drawingFunction, 0);