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

时间:2016-01-23 15:30:38

标签: javascript image canvas

我正在使用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。

谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

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



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";

<canvas id="game" width="50px" height="50px"></canvas>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果只在加载时调用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();
};

答案 2 :(得分:0)

感谢大家的帮助!我考虑过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);
}

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