HTML5 畫布動畫不顯示背景圖像

Question

我正在嘗試做一個簡單的動畫，其中一個氣泡在啤酒瓶中升起並與背景圖像作斗爭。 啤酒圖像未顯示。 我只看到泡沫在上升。

我的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Bieranimation</title>
</head>

<body>


<div id="container">
<img class='img' src="https://i.imgur.com/VW3zcXq.jpg" alt="" />
<canvas id="bier" width="400" height="520" style="border:solid 1px">        
 </canvas>
</div>



<script type="text/javascript">


var c=document.getElementById("bier");
var ctx=c.getContext("2d");

var width = c.width;   // Canvas Grösse
var heigth = c.height;
var x, y;              // aktuelle x- und y-Koordinaten
var x0 = 50;           // Start-Koordinaten
var y0 = 400;
var v0x = 0.05;        // Geschwindigkeit in Pixel/Millisekunde
var v0y = 0.00005;
var dt = 20;           // Zeitintervall in Millisekunden
var r = 40;            // Radius
var zeit;              // Aktuelle Laufzeit
var i = 0;

fZeichnen(ctx);
var aktiv = setInterval(function() {fZeichnen(ctx); }, dt);


function fZeichnen(context) {


    // Für das Fade Out: Definition eines Alpha-Wertes
    // für das Übermalen des vorhergehenden Bildzustandes
             // Überdeckung 10%
    // Vorhergehender Bildzustand wird mit der Füllfarbe und dem
    // soeben definierten Alpha-Wert übermalt


    context.fillRect(0,0,width,heigth);
    // Die Ball-Zeichnung soll alles darunter liegende vollständig überdecken
          // Überdeckung 100%

    context.fillStyle="#FFFFFF";   // Grün
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI*2, true);
    context.closePath();
    context.stroke();
                       // Kreis zeichnen und füllen
    x = x0 + v0x;                // Neue Koordinaten
    y = y0 + v0y - zeit;

    i += 0.1;
    zeit = i * dt;                      // Gesamtlaufzeit
    if (zeit >= 5000) {
        clearInterval(aktiv)
    }

}

   </script>

</body>
   </html>

我試圖用z-index做一些事情，但它似乎不起作用：

body{text-align: center;}
.img{position:absolute;z-index:-1;}

#container{
    display:inline-block;
    width: 400px;
    height:520px;
    margin: 0 auto;

    position:relative;
   }

#gameCanvas{
    position:relative;
z-index:20;
}

我很感激任何形式的幫助。

Answer 1

（我不知道為什么我習慣性地嘗試在評論中回答問題。現在更正。）

默認情況下畫布是透明的，但目前您正在通過用白色填充每個循環來擦除畫布：

context.fillRect(0,0,width,heigth);

如果您改為擦除它（從技術上講，用透明顏色填充它），您將能夠看到畫布后面堆疊的元素：

context.clearRect(0,0,width,heigth);

HTML5 畫布動畫不顯示背景圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2018-03-12 13:20:24

HTML5 畫布動畫不顯示背景圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2018-03-12 13:20:24

解決方案1
0 已采納 2018-03-12 13:20:24