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 个答案: