个人中心
gpt4 book ai didi

Javascript:图像未加载到 Canvas 上

转载 作者：行者123 更新时间：2023-12-01 01:35:54 25 4
gpt4 key购买 nike

我正在尝试使用图像作为 Canvas 的背景。然而，我很难加载图像——它总是显示为空白:

<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");

最佳答案

您仍然可以在全局范围内使用它们。由于 Canvas 无法立即使用，因此您无法在加载之前绘制图片。 

<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>

关于Javascript:图像未加载到 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52826040/

25 4 0
文章推荐： jquery - 水平滚动布局左/右: jQuery/CSS quiz
文章推荐： python - 如何选择数值最大的列名作为新的列元素？
文章推荐： microcontroller - 如何重新编程 USB "easy button"？
文章推荐： jquery - 关于 jQuery 选择器的不同浏览器行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com