我正在尝试在HTML5画布上加载图像。我正在学习一本教程，而且我已经完成了一切。
我的控制台打印“图像加载”，所以我知道它已经找到了png文件。但是，屏幕上没有任何内容。
我已经尝试调整画布大小，并尝试使图像显示在不同的坐标上，但无济于事。
<body>
<canvas id="my_canvas"></canvas>
</body>
<script>
var canvas = null;
var context = null;
var basicImage = null;
var setup = function() {
// Set up canvas
canvas = document.getElementById("my_canvas");
context = canvas.getContext('2d'); // lets us modify canvas visuals later
canvas.width = window.innerWidth; // 1200
canvas.height = window.innerHeight; // 720
// Load an image
basicImage = new Image();
basicImage.src = "bb8.png";
basicImage.onload = onImageLoad();
}
var onImageLoad = function() {
console.log("image loaded");
context.drawImage(basicImage, 0, 0);
}
setup();
</script>
而不是在basicImage.onload上绘制图像，尝试在window.onload
var setup = function() {
// Set up canvas
canvas = document.getElementById("my_canvas");
context = canvas.getContext('2d'); // lets us modify canvas visuals later
canvas.width = window.innerWidth; // 1200
canvas.height = window.innerHeight; // 720
// Load an image
basicImage = new Image();
basicImage.src = "bb8.png";
}
window.onload = function() {
console.log("image loaded");
context.drawImage(basicImage, 0, 0);
}
setup();