Question

在我的一个项目中，我成功地使用以下代码使用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();之类的东西直接填充tooltip.icons数组但没有成功（其中n = tooltip.icons.length）。可能有一部分JavaScript范围我不明白。

Answer 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);
};

这里可以将坐标（和网址）存储在一个数组中，然后重复遍历，而不是小黑客。

使用画布自动加载图像的功能

1 个答案: