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