Chrome31.0 HTML5画布绘制图像
Chrome31.0 HTML5画布绘制图像
提问于 2013-11-26 10:29:49
自从下载当前版本的chrome (31.0.1650.57版)以来，我一直无法用我的代码在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出现之前运行得很好。降低铬的评级也不是一个选择。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-11-28 11:51:31
我解决了问题。似乎最新版本的Chrome不喜欢它，如果你声明你的图像在每帧迭代。(以前似乎是允许的，但我真的不该这么做。)如果您在js顶部，除任何函数之外，声明您的图像及其源，并且只在函数中绘制它们，那么问题就解决了，例如：
var image = new Image();
image.src='image.jpg';
someFunction() {
canvas.drawImage(image,0,0);
}Stack Overflow用户
发布于 2013-11-26 14:52:17
问题就在这一行上：
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事件时会发生这种情况)，它会用参数调用您的绘制处理程序。
Stack Overflow用户
发布于 2014-03-07 05:00:34
注意：.src应该总是在 .onload之后被称为。否则，会出现很多难以追踪的小货车(像这辆)。特别是如果您的图像加载之前，负载可以被解析。您当前接受的解决方案可能是功能性的，因为存在功能开销计时的争用条件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20214470
复制相关文章
相似问题
腾讯云开发者
