19

假设我有一个带有画布的 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一无所知，我认为完成这件事应该不难，希望有人能在这里帮忙，谢谢:)

4

3 回答 3

22

现场演示

你只需要使用z-index. 我将图像和画布元素放在一个容器中，并定位它们，使画布始终位于图像上方。

另请注意，您不应该使用 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;
}
于 2013-03-26T14:50:29.683 回答
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();
}
于 2013-03-26T14:37:44.277 回答
1

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

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

或者像Pranay Rana所说的那样使用JavaScript （如果你有其他级别或者以后必须更改背景会更好）:)

于 2013-03-26T14:45:19.307 回答