画布图像未显示答案

【问题标题】：Canvas Image not showing画布图像未显示
【发布时间】：2021-08-13 20:19:34
【问题描述】：

我目前在 HTML 画布中显示图像时遇到问题。我还是新手，我很累，所以很可能是我没有做的愚蠢的事情。代码如下：

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

canvas.height = 695;
canvas.width = 1515;

//Images

const BG = new Image();
BG.src = "C:\Users\MSI\Documents\ABGG Remastered\StartImg.png"

ctx.drawImage(BG, 0, 0);

<!DOCTYPE html>
<html>

<body>
    <canvas id="canvas"></canvas>

    <script src="C:\Users\MSI\Documents\ABGG Remastered\mainScript.js">
    </script>

    <style>
    canvas {
        border: 1px solid;
    }
    </style>

</body>

</html>

感谢您的帮助！

【问题讨论】：

如果您尝试使用来自互联网的图像而不是本地文件，它会起作用吗？
这能回答你的问题吗？ simple HTML5 canvas image not displaying

标签： javascript html html5-canvas

【解决方案1】：

加载图像不是即时的，因此您需要先等待它加载，您可以使用图像的onload 函数来完成

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

canvas.height = 695;
canvas.width = 1515;

//Images

const BG = new Image();
BG.src = "https://images3.alphacoders.com/899/thumb-1920-899727.jpg"

BG.onload = () => {ctx.drawImage(BG, 0, 0);}

<!DOCTYPE html>
<html>

<body>
    <canvas id="canvas"></canvas>

    <script src="C:\Users\MSI\Documents\ABGG Remastered\mainScript.js">
    </script>

    <style>
    canvas {
        border: 1px solid;
    }
    </style>

</body>

</html>

【讨论】：

【解决方案2】：

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.height = 695;
canvas.width = 1515;

//Images

const BG = new Image();
BG.addEventListener('load', function() {
    ctx.drawImage(BG, 20,20);
})
BG.src = "C:\\Users\\dhrum\\Documents\\Projects\\WizemenDesktop\\WizemenDesktop\\Assets\\icon.png"

</script>

我把代码改成了这个，它可以工作。首先，我建议使用等待图像加载的方法，然后再绘制它（慢速服务器或大文件可能需要一点时间来加载，因此如果不加载则不会绘制）。

其次，你的问题是\ 转义了字符，而你想做\\，其中第一个\ 将转义第二个\，这将使只有 1 个 \ 的字符串。

要了解转义字符的含义，您可以前往here

【讨论】：