HTML canvas 在 canvas 下面显示图像而不是在 canvas 里面

Question

我正在尝试在 HTML5 canvas 中显示背景图片。我已确保图像和 html 文件位于同一文件夹中，因此，图像正在显示。我还尝试调整图像大小，以确保图像对于 canvas 来说不会太大，但是，图像一直显示在 canvas 下方，而不是 canvas 内部。我的代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Opening screen</title>
</head>
<body>
<img>
<canvas id="canvas"
        style =
                "width: 700px;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>
<img id="sky"  src="sky.png">
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
</script>
</body>
</html>

Answer 1

将此添加到您的脚本中- 加载图像后将图像绘制到 canvas。

var background = new Image();
background.src = "www.xyz.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

Answer 2

当您尝试将图像插入 canvas 时，该图像还没有 loaded/downloaded。

您可以将代码添加到 window.onload 函数，它应该可以工作

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
}

至于为什么它显示在您的 canvas 下方，您有一个包含该图像的 img 元素，位于 canvas 之后。

Answer 3

您可以移除您的 img 标签并为您的 canvas

设置背景

<canvas id="canvas"
        style =
                "width: 700px;
                  background: url(https://placekitten.com/1000/1000) no-repeat top center;
                  background-size:cover;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>

Answer 4

实际上，您创建的图像元素将呈现在 canvas 下方，因为 canvas 始终呈现在所有元素上方。有一种方法可以将图像标签放在 canvas 上方，但它会隐藏您在 canvas 上绘制的其他内容，因此请使用 graphicsContext.drawImage() 函数。

var canvas = document.getElementById("canvas-id");
//graphics context
var ctx = canvas.getContext("2d");
var backgroundImage = new Image();
backgroundImage.src = "path-to-the-background-image-file/bgi.png";
backgroundImage.onload = function() {

ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.width);

}

HTML canvas 在 canvas 下面显示图像而不是在 canvas 里面

HTML canvas displays image below canvas instead of inside canvas

html

javascript

canvas

background-image