Chrome 31.0 HTML5画布绘制图像

由于下载当前版本的Chrome（版本31.0.1650.57），我已经完全无法使用我的代码在HTML5画布中绘制图像;没有错误，它找到资源，他们只是没有绘画。我非常感谢这方面的帮助！Chrome 31.0 HTML5画布绘制图像

var grass_img = new Image(); 
grass_img.src = 'grass.gif'; 
grass_img.onload = draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);

其中在这里和那里出现在多个不同的图像，并呼吁：

function draw_here(image, x, y, scale){ 
    draw_canv.drawImage(image, x, y, image.width * scale, image.height * scale); 
}

X和Y是正确的，是规模;调试器没有发现编码错误，并且程序完美工作，直到最新版本的Chrome出现。降级铬也不是一种选择。

来源

2013-11-26 Gargleyark

31有相当一些绘画问题，它似乎。我不知道是否有其他的事情要做，而不是等待...... – GameAlchemist

啊哈是一个已知的错误？那么我不需要惊慌太多。无论如何，我会继续寻找简单的修复方法 – Gargleyark

OOps既然你说'它工作的很完美'我只是忽略了，但@Philipp的答案肯定是正确的。这是关于在使用它们之前等待资源加载的老问题。 – GameAlchemist

我解决了这个问题。看起来，如果您在每个帧迭代中声明图像，Chrome的最新版本并不喜欢它。（以前似乎允许的东西，但我真的不应该这样做）。如果你在js的顶部声明你的图像和它们的源，而不是任何函数，并且只有在函数中绘制它们，那么问题解决了，例如：

var image = new Image(); 
image.src='image.jpg'; 

someFunction() { 
    canvas.drawImage(image,0,0); 
}

来源

2013-11-28 11:51:31 Gargleyark

的问题是在这条线：

grass_img.onload = draw_here(/* ... */);

你似乎认为你分配的功能draw_here作为一个onload处理程序。但这不是这一行真正发生的事情。你真正做的是立即执行draw_here，并将该函数的返回值（undefined）指定为grass_img.onload。

试试这个：

grass_img.onload = function() { 
    draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1); 
}

这将创建一个匿名函数被分配到onload事件处理程序。当这个匿名函数被调用（当load-event被触发时会发生），它会用你的参数调用你的draw-handler。

来源

2013-11-26 14:52:17 Philipp

这仍然没有排序的图像没有出现的问题 - 它绝对是改进了代码，但它没有解决这个问题，只出现在新版本的铬 – Gargleyark

@Gargleyark你可以尝试提供[SSCCE] （http://sscce.org/）jsfiddle并打开一个新的问题？ – Philipp

-1

注：.src应该总是被称为后.onload。否则会出现许多难以追踪的车（如此类）。特别是如果您的图像加载之前加载可以解析。由于竞争状态和功能开销时间的关系，您当前接受的解决方案可能功能正常。

来源

2014-03-07 05:00:34 Isius

Chrome 31.0 HTML5画布绘制图像

回答

相关问题