1

在我的一个项目中，我成功地使用以下代码使用 JavaScript 在 html5 画布中呈现 png 图像。

var sizeIcon = new Image();
sizeIcon.draw = function() {
    ctx.drawImage(sizeIcon, tooltip.x + 10, tooltip.y + 10);
};

sizeIcon.onload = sizeIcon.draw;
sizeIcon.src = "./images/icons/ruler.png";
tooltip.icons.push(sizeIcon);

由于我要加载多个图标，因此我实现了以下功能：

var imageLoader = function(x, y, src) {
    var image = new Image();
    image.draw = function() {
        ctx.drawImage(image, x, y);
    };

    image.onload = image.draw;
    image.src = src;
    tooltip.icons.push(image);
};

imageLoader(tooltip.x + 10, tooltip.y + 10, "./images/icons/ruler.png");

tooltip.icons 是一个全局可访问的数组。此函数什么都不做（并且不会在控制台中产生任何错误或警告）。tooltip.icons[n] = new Image();我还尝试使用没有成功（where n = tooltip.icons.length）之类的方法直接填充 tooltip.icons 数组。我可能不理解 JavaScript 范围的一部分。

4

1 回答 1

1

image当您到达回调处理程序时，您基本上冒着使对象无效（如不可用）的风险，因为图像加载是异步的，并且该函数（很可能）在onload调用之前退出。

尝试做一些这样的切换：

var imageLoader = function(x, y, src) {

    var image = new Image();

    function draw() {
        // use *this* here instead of image
        ctx.drawImage(this, x, y)
    };

    image.onload = draw;
    image.src = src;

    tooltip.icons.push(image);
};

除了这里的小技巧，您可以将坐标（和 url）存储在一个数组中并遍历它。

于 2013-09-11T00:29:17.117 回答