图像未在画布上绘制 (HTML5)答案

【问题标题】：Image is not drawing on canvas (HTML5)图像未在画布上绘制 (HTML5)
【发布时间】：2020-04-14 00:46:52
【问题描述】：

我正在尝试在 HTML5 的画布上绘制图像。由于某种原因，图像根本没有绘制到canvas 上，并且控制台中没有错误。这是我的代码：

<!DOCTYPE html>
<html>
    <body>
        <img id="image" src="Images/player.png"></img>
        <canvas id="canvas" width="1000" height="750"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var image = document.getElementById("image");

            context.fillStyle = "lightblue";
            context.fillRect(0, 0, 1000, 750);
            context.drawImage(image, 0, 0);
        </script>
    </body>
</html>

有人可以帮忙吗？谢谢。

【问题讨论】：

图片是否显示在页面上？它应该，因为您添加了一个 img 标签。如果不是，则 player.png 的路径很可能不正确。您确定 Images 目录是用大写字母 I 拼写的吗？图片目录是否在您的 HTML 文件所在目录的下方？
它出现在画布旁边，但没有被绘制到画布上。

标签： javascript html image canvas

【解决方案1】：

您需要向名为load 的img 标记添加一个事件侦听器。然后在回调中，您可以使用提供的img 元素调用drawImage。

你可以这样做——我已经添加了一张stackoverflow图像来表示：

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = document.getElementById("image");

context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);

image.addEventListener('load', e => context.drawImage(image, 0, 0));

<img id="image" src="https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/images2/header-podcast.svg" height="100px"></img>
<canvas id="canvas" width="1000" height="750"></canvas>

来自文档：Drawing an image to the canvas

我希望这会有所帮助！

【讨论】：

感谢您的回答！我在太空侵略者游戏中使用它，所以我经常使用 setInterval() 函数将图像绘制到画布上。在此间隔内，我如何不断地在画布上绘制图像？
听起来情况不同。你有这个代码sn-p吗？
@PrimeCubed 在游戏开始前等待图像加载一次。然后，您可以随时绘制它：图像一旦加载，就不会从<img> 卸载。