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

【问题标题】：How to set canvas on top of image in html如何在html中的图像顶部设置画布
【发布时间】：2013-03-16 09:43:30
【问题描述】：

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

【问题讨论】：

<img> 不是背景图像。因此，要么将你的画布元素放在它上面——要么为你的画布元素或其容器使用真实背景图像。
查看答案如何在画布中加载图像
当包含画布的div的背景是黑色的时候，你希望如何看到图像
感谢您的回答 :) 但问题是，我无法编辑包含 gameCanvas 中代码的 js 文件。想要的就像将画布（比如 html5 游戏）嵌入到静态 html 页面中，并且页面有背景图像（比如比画布大）。有点像 facebook 游戏，大背景和画布……这可能吗？

标签： html canvas

【解决方案1】：

您可以像这样在画布中绘制图像，而不是将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();
}

【讨论】：

不喜欢这个，因为如果他用动画制作任何东西，它会导致不必要的性能损失。他每次都必须重新绘制背景。
感谢您的回答 :) 但问题是，我无法编辑包含 gameCanvas 中代码的 js 文件。想要的就像将画布（比如 html5 游戏）嵌入到静态 html 页面中，并且页面有背景图像（比如比画布大）。有点像 facebook 游戏，大背景和画布……这可能吗？
@Loktar - 感谢我没有得到将画布放在图像上的目的......最好将图像放在带边框的 div 中......

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

Live Demo

您只需要使用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;
}

【讨论】：

好帅！！！现在图像现在在画布下~~~唯一的问题是我希望画布水平居中但图像填充整个bg（它不应该居中）~~~我想我应该编辑一些css怎么样~
将以下行添加到#container: box-sizing: content-box;从而使容器足够大，以使图像和画布完美契合。
demo好像没了