Canvas 图片未显示

Question

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

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>

感谢您的帮助！

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

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

我更改为此代码并且它有效。首先，我建议使用一种等待图像加载的方法，然后再绘制它（慢速服务器或大文件加载需要一点时间，因此如果不加载则不会绘制）。

其次，你的问题是 \ 转义了字符，而你想做 \，其中第一个 \ 将转义第二个 [=11] =] 这将使字符串的实际值只有 1 \.

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

Canvas 图片未显示

Canvas Image not showing

html

javascript

html5-canvas