我正在使用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。
谢谢!
答案 0 :(得分:1)
问题出在此处:ctx.drawimage(image, x, y, width, height);
其中i
drawimage
应为大写I
:ctx.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;
答案 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);
}
如果代码期望看到的所有图像都存在,那么这将会运行。