logo标签列表

HTML画布显示图像时，将图像显示在画布下方而不是画布内部

javascripthtmlcanvasbackground-image
4

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

<!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>
4个回答
3

当您尝试将图像插入画布时，图像还没有加载/下载。

您可以将代码添加到 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);
}

关于为什么画布下方显示图片，是因为您在画布后面放置了一个包含该图片的img元素。
2
您可以删除图像标签并为画布设置背景。 

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

2
将以下代码添加到你的脚本中 - 在图片加载完成后将其绘制到画布上。
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);   
}
好的，所以图像在画布内部。谢谢。如果图像太大，有没有一个函数可以调整图像大小，使其完美地适应画布？而不是玩弄.drawImage的宽度和高度参数。 - Barry B Benson
请参考此答案-https://dev59.com/RWAg5IYBdhLWcg3w1uDy - ellipsis
0
实际上，您创建的图像元素将呈现在画布下方，因为画布始终呈现在所有元素之上。有一种方法可以将图像标签放置在画布上方，但它会隐藏您在画布上绘制的其他内容，因此请使用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);

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接