Как установить холст поверх изображения в html

Скажем, у меня есть 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>

и холст показывает ok таким образом ~~~

Теперь я хочу поместить изображение в качестве фона за холстом, и я попытался добавить тег 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 Я думаю, что это не должно быть так сложно сделать, надеюсь кто-то может дать руку здесь, спасибо:)

Ответ 1

Живая демонстрация

Вам просто нужно использовать 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;
}

Ответ 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();
}

Ответ 3

Вы можете установить фоновое изображение для холста с помощью background-image: url('xxx.png');, но фон не будет отображаться, если пользователь нажимает View image в браузере.

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

Или используйте JavaScript как Pranay Rana (лучше, если у вас есть другие уровни или вам нужно изменить фон позже):)