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>

キャンバスはこのように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について何も知りません。これを成し遂げるのはそれほど難しいことではないと思います。誰かがここで手を差し伸べることを願っています、ありがとう:)

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 に答える