我有一些加载图片的代码。
var assets = {
total:0,
success:0,
error:0
};
var stillLoading = true;
var img = {};
function LoadImage(name, path){
var toLoad = new Image();
toLoad.src = path;
assets.total++;
toLoad.addEventListener("load", function(){
assets.success++;
console.log(name + " loaded.");
img[name] = toLoad;
}, false);
toLoad.addEventListener("error", function(){
assets.error++;
}, false);
};
function Loading(){
if (assets.success == assets.total){
if (stillLoading){
console.log("All assets loaded. Starting game.");
};
stillLoading = false;
return false;
}else{
stillLoading = true;
return true;
};
};
可能仍然效率低下，而且丑陋，因为我是练习 javascript 的新手，愿意接受建议。它加载图像并通过函数 Loading() 告诉主程序所有 Assets 加载完成后，然后将图像添加到对象 img 中。
我已经将它用于我的图像有一段时间了，而且效果很好。
例如，如果我这样做了。
LoadImage("Car", "imageOfCar.png");
ctx.drawImage(img.Car, 0, 0);
这会将图像绘制到 Canvas 上。
但是，当我为图像分配另一个变量时，出于各种原因我想这样做，例如将图像分配给对象。例如
var secondCar = img.Car
然后尝试绘制它。
ctx.drawImage(secondCar, 0, 0);
我收到这个错误。
未捕获的类型错误:无法在“CanvasRenderingContext2D”上执行“drawImage”:提供的值不是“(HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap)”类型
如果它适用于初始变量，它应该以同样的方式作用于刚刚被分配了完全相同事物的另一个变量。那么为什么我会收到此错误？
如果我以不检查是否已完成加载的典型方式加载图像。
img.Car = new Image();
img.Car.src = "imageOfCar.png";
secondCar = img.Car;
ctx.drawImage(secondCar);
这行得通。 这里的行为有点令人困惑，有人可以向我解释发生了什么，并可能建议一种解决方法吗？
编辑:只是为了澄清。
这是名为 index.html 的 html 文件。
<!DOCTYPE html>
<head>
<title>HTML5 Game Base</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css">
</head>
<body>
<canvas id="screen" width="270" height="480" style="border:1px solid #000000;"></canvas>
<script src = "script.js"></script>
</body>
</html>
Canvas 设置为屏幕。我上面显示的所有 JavaScript 代码都发生在 index.html 中调用的 script.js 中。
这就是在 script.js 中调用 screen 的方式。
var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
这就是 ctx.drawImage() 所引用的内容。
最佳答案
我知道这不是最有帮助的答案，但我稍微修改了您的代码。这是我使用的:
<!DOCTYPE html>
<head>
<title>HTML5 Game Base</title>
</head>
<body>
<canvas id="screen" width="270" height="480" style="border:1px solid #000000;"></canvas>
<script>
var stillLoading = true;
var img = {};
var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
assets = {};
assets.total = 0;
function LoadImage(name, path){
var toLoad = new Image();
toLoad.src = path;
assets.total++;
toLoad.addEventListener("load", function(){
//assets.success++;
console.log(name + " loaded.");
img[name] = toLoad;
}, false);
toLoad.addEventListener("error", function(){
assets.error++;
}, false);
}
</script>
</body>
</html>
然后在 Chrome 的控制台中输入
LoadImage("Car", "map.png");
LoadImage("un", "Untitled.png");
ctx.drawImage(img.Car, 0, 0);
ctx.drawImage(img.un, 0, 0);
并获得在 Canvas 中加载图像的预期结果。即使将其中一个 img 图像分配给新变量，这也能按预期工作。
var second = img.Car
ctx.drawImage(second, 0, 0)
手动运行时似乎一切正常，所以我猜是时间问题。你什么时候运行这些命令？它们是在 js 文件中还是来自控制台？
看起来您的 LoadImage 函数没有问题。抱歉，这不是很有帮助，但希望能帮助您排除不应该寻找问题的地方。
关于javascript - HTML5/Javascript 图像加载方法 & 传递给变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35381230/