Question

我正在使用canvas元素在一个小游戏上绘制图像并将它们作为实体图块。

为了使context.drawImage（）函数起作用，调用绘图时调用的图像变量需要先加载到内存中，否则会尝试绘制未定义的图像。

目前我使用image.onload事件进行设置，如下所示：

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");
image.src = "images/image.png";

function drawimage () {
    "use strict";
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawimage(image, x, y, width, height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

-Edit-这是一个新的片段，因为我正在为一个平台绘制的游戏进行此操作。

var drawtimer = setInterval(drawimage, 10);

这有效，但它有点乱，我需要为需要加载的每个图像创建一个新的全局变量，并使用onload函数来设置该变量。

我想知道的是，而不是做：

if (imageloaded === true) {
    ctx.drawimage(image, x, y, width, height);
}

我可以做一些像以下一样的事情：

if (image.testloaded() === true) {
    ctx.drawimage(image, x, y, width, height);
}

如果加载图像而不必依赖onload，则将报告返回。

作为参考，我在这里使用纯JavaScript，我愿意使用特殊的库，但理想的答案是使用纯JavaScript。

谢谢！

Answer 1

问题出在此处：ctx.drawimage(image, x, y, width, height);其中i drawimage应为大写I：ctx.drawImage，请参阅CanvasRenderingContext2D.drawImage()

另外，请尝试在image.src = "/path/to/image/";事件声明

之后移动image.onload = function() {}

＆＃13;

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");

function drawimage () {
    "use strict";
  console.log(imageloaded)
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawImage(image, 0, 0, c.width, c.height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

image.src = "http://lorempixel.com/50/50/nature";

＆＃13;

<canvas id="game" width="50px" height="50px"></canvas>

＆＃13;

Answer 2

如果只在加载时调用drawImage（）函数，它是否总是被加载，因此不需要检查？即

function drawimage () {
    "use strict";
    if (imageloaded === true) {
        ctx.drawimage(image, x, y, width, height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

与

相同

function drawimage () {
    "use strict";
    ctx.drawimage(image, x, y, width, height);
}

image.onload = function () {
    "use strict";
    drawimage();
};

Answer 3

感谢大家的帮助！我考虑过Joseph Young关于使用中心函数或变量来判断加载了哪些图像的评论，并提出了这个问题：

var imagesloaded = 0;

image.onload = function () {
    imagesloaded += 1;
}

function imagetestloaded () {
    if(imagesloaded === 1){
        return(true);
    } else {
        return(false);
    }
}

if (imagetestloaded() === true) {
    ctx.drawimage(image, x, y, width, height);
}

如果代码期望看到的所有图像都存在，那么这将会运行。

有没有办法让函数在加载图像时返回true或false？

3 个答案: