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

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

html canvas

如何在html中设置图像顶部的画布,html,canvas,Html,Canvas,假设我有一个包含画布的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;

假设我有一个包含画布的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一窍不通，我认为完成这项工作应该不会那么难，希望有人能在这里帮忙，谢谢：）

你可以像这样在画布上画图像，而不是把

画布

放在图像上

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();
}

您可以使用

背景图像：url（'xxx.png'）为画布设置背景图像但如果用户在浏览器中按查看图像
，则不会显示背景
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>  



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

你只需要使用。我将图像和canvas元素放在一个容器中，并对它们进行定位，以便画布始终位于图像上方
另一个注意事项是，您不应该使用CSS调整画布的大小，您应该始终直接通过属性进行调整。在我的小提琴里，我是通过JS做的
加成
不是背景图像。因此，要么将画布元素放在画布上，要么为画布元素或其容器使用真实的背景图像。检查答案如何在画布中加载图像当包含画布的div的背景为黑色时，您希望如何看到图像谢谢答案：）但问题是，我无法在gameCanvas中编辑包含代码的js文件。我们想要的东西就像在静态html页面中嵌入画布（比如html5游戏），页面有背景图像（比如比画布大）。有点像facebook的游戏，有一个大背景和画布…这可能吗？我不喜欢这个，因为如果他用动画制作任何东西，它将导致一个非必需的性能打击。他每次都必须重新绘制背景。谢谢你的回答：）但问题是，我不能编辑游戏画布中包含代码的js文件。我们想要的东西就像在静态html页面中嵌入画布（比如html5游戏），页面有背景图像（比如比画布大）。有点像facebook的游戏，一个大背景和一块画布…这可能吗？@Loktar-谢谢我没有把画布放在图片上的目的…最好把图片放在有边框的div中…太酷了！！！现在图像就在画布下~~~唯一的问题是我希望画布水平居中，但图像要填充整个背景（不应该居中）~~我想我应该编辑css一些方法~添加以下行到#容器：框大小：内容框；因此，您可以使容器足够大，以使图像和画布完美匹配
<div id="container">
    <img class='img' src="http://lorempixel.com/320/480/" alt="" />
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>

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