Question

假设我有一个带有画布的index.html：

<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">

<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>

并且画布以这种方式显示确定~~~

现在我想在画布后面放置一个图像作为背景，我试图在正文中添加一个img标签：

<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>

然后画布似乎显示在图像不在它之上......

我对html一无所知我觉得应该不难做到这一点，希望有人能在这里伸出手，谢谢：）

Answer 1

<强> Live Demo

您只需使用z-index即可。我将图像和canvas元素放在一个容器中，然后定位它们，使画布始终在图像上。

另外注意，你不应该使用CSS调整画布大小，你应该总是通过属性直接进行。在我的小提琴中，我通过JS做到了。

标记

<div id="container">
    <img class='img' src="http://lorempixel.com/320/480/" alt="" />
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>

CSS

body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}

#container{
    display:inline-block;
    width:320px; 
    height:480px;
    margin: 0 auto; 
    background: black; 
    position:relative; 
    border:5px solid black; 
    border-radius: 10px; 
    box-shadow: 0 5px 50px #333}

#gameCanvas{
    position:relative;
    z-index:20;
}

Answer 2

您可以像这样在画布上绘制图像，而不是将canvas放在图像上

var topMap = new Image();
topMap.src = "myiamge.jpeg";

function drawMap() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    context.drawImage(topMap, 0, 0);
}

function init() {
    drawMap();
}

topMap.onload = function() {
  init();
}

Answer 3

您可以使用background-image: url('xxx.png');为画布设置背景图像，但如果用户在浏览器中按View image，则不会显示背景。

<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>

或者像 Pranay Rana 那样使用JavaScript（如果你有其他关卡或者你以后必须更改背景，那就更好了）：）

如何在html中设置图像顶部的画布

3 个答案:

标记

CSS