Javascript:图像不会加载到画布上
Javascript:图像不会加载到画布上
提问于 2018-10-16 07:31:48
我正在尝试使用一幅图像作为我的画布的背景。但是，我很难加载图像--它总是显示为空白：
<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"); 回答 1
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52826040
复制相关文章
相似问题