Chrome 31.0 HTML5画布绘制图像

Chrome 31.0 HTML5 Canvas Draw Image

本文关键字：绘制 图像 布绘制 HTML5 Chrome      更新时间：2023-10-09

自从下载了当前版本的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问世。降级铬也不是一种选择。

问题出在这一行：

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处理程序。当调用该匿名函数时（将在触发加载事件时发生），它会使用参数调用绘图处理程序。

我解决了这个问题。如果你在每一帧迭代中都声明自己的图像，那么最新版本的Chrome似乎不喜欢这样。（这似乎是以前允许的，但我真的不应该这么做。）如果你在js的顶部，在任何函数之外声明你的图像及其来源，并且只在函数中绘制它们，那么问题就解决了，例如：

var image = new Image();
image.src='image.jpg';
someFunction() {
    canvas.drawImage(image,0,0);
}

注意：.src应始终在.onload之后调用。否则就会出现很多难以追踪的童车（比如这辆）。特别是如果在解析onload之前加载了图像。您当前接受的解决方案可能由于具有函数开销计时的竞争条件而起作用。

相关文章：