web-dev-qa-db-fra.com

Comment définir une toile au-dessus de l'image en HTML

Dites que j'ai un index.html avec une toile:

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

et la toile montre ok de cette façon ~~~

Maintenant, je veux mettre une image en tant qu'arrière-plan derrière la toile et j'ai essayé d'ajouter une balise img dans le corps:

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

mais alors la toile est apparue pour montrer après l'image pas sur elle ...

Je ne sais vraiment rien sur le langage HTML. Je pense que cela ne devrait pas être si difficile de le faire. J'espère que quelqu'un pourra donner un coup de main ici, merci :)

htmlhtml5canvas
13
supersuraccoon

Démo en direct

Vous devez juste utiliser z-index. Je mets l'image et l'élément canvas dans un conteneur et les positionne de manière à ce que la toile soit toujours au-dessus de l'image.

Autre remarque, vous ne devriez pas redimensionner votre toile à l’aide de CSS, vous devez toujours le faire directement via les propriétés. Dans mon violon je l'ai fait via JS.

Markup

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

vous pouvez dessiner une image dans le canevas comme ceci, plutôt que de mettre canvas sur une image

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

Vous pouvez définir une image d'arrière-plan pour le canevas avec background-image: url('xxx.png');, mais l'arrière-plan ne sera pas affiché si l'utilisateur appuie sur View image dans le navigateur. 

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

Ou utilisez JavaScript comme Pranay Rana dit (mieux si vous avez d’autres niveaux ou si vous devez changer le fond plus tard) :)

0
metalwings