我正在尝试使用一幅图像作为我的画布的背景。但是,我很难加载图像--它总是显示为空白:
<html>
<script>
var background = new Image();
background.src = "img/map.png";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
window.onload = function() {
ctx.drawImage(background, 0, 0);
}
</script>
<body>
<canvas id="myCanvas" width="400" height="400"> </canvas>
</body>
</html>
但是,如果我将以下两行放入window.onload函数中,则图像加载不会出现任何问题。导致此问题的原因是什么?因为我将在其他函数中使用canvas和ctx,所以我真的希望全局地定义它们,而不是在每个函数中单独定义它们。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
发布于 2018-10-16 07:40:39
您仍然可以在全局范围内使用它们。由于画布不能立即可用,您不能在加载之前绘制图片。
<script>
var background = new Image();
background.src = "img/map.png";
var canvas;
var ctx ;
window.onload = function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(background, 0, 0);
} </script>
https://stackoverflow.com/questions/52826040
复制相似问题