HTML5 画布动画不显示背景图像答案

【问题标题】：HTML5 canvas animation not showing background imageHTML5 画布动画不显示背景图像
【发布时间】：2020-02-16 23:11:04
【问题描述】：

我正在尝试制作一个简单的动画，其中气泡在啤酒瓶中升起并与背景图像作斗争。啤酒图像未显示。我只看到泡沫在上升。

我的代码：

<!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;
}

如果能提供任何帮助，我将不胜感激。

【问题讨论】：

看起来你正在填充画布：context.fillRect(0,0,width,heigth); 尝试删除它，默认透明的画布应该让你看到堆叠在它后面的图像。
我试过这样做，但问题是圆圈没有被删除。它只是绘制了新的圆圈并创建了一个奇怪的东西。有没有办法擦除最后绘制的元素？

标签： javascript html css animation canvas

【解决方案1】：

（我不知道为什么我习惯性地尝试在 cmets 中回答问题。现在更正。）

默认情况下，画布是透明的，但目前您正在通过填充白色来擦除每个循环的画布：

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

如果您改为擦除它（从技术上讲，用透明颜色填充它），您将能够看到堆叠在画布后面的元素：

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

【讨论】：