如何使用 .js 文件作为背景？

Question

我有一个带有简单动画的 .js 文件，我想将其用作网站的背景。我可以将它放到页面上等等 - 但文本出现在动画下方而不是上方。我试过查找解决方案，但我所能找到的只是将 .png/.jpg 设置为背景的说明。我对编程很陌生，所以我一点也不知道我会怎么做。感谢您的帮助。

编辑：这是我正在尝试使用的代码！

<!DOCTYPE html> 
<html> 
<head> 
    <title>Scrolling Page</title> 
</head> 
<body style="background-color: black;"> 
   <canvas id="canvas1"></canvas> 
<h1>Text</h1>
<p>text</p>
</body>
</html>

<script src="mainscript.js"></script>

mainscript.js 是：

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 
can.width = 9200; 
can.height = 630; 
var img = new Image(); 
img.src = "tempimage.png";
window.onload = function() { 
    var imgWidth = 0; 
    var scrollSpeed = 10; 
    function loop() 
    { 
        ctx.drawImage(img, imgWidth, 0); 
        ctx.drawImage(img, imgWidth - can.width, 0); 
        imgWidth -= scrollSpeed; 
        if (-imgWidth == can.width) 
            imgWidth = 0; 
        window.requestAnimationFrame(loop); 
    } 
    loop();

Answer 1

因为我们不是在谈论仅使用图片作为背景，而是使用正在动画的 HTML canvas 元素，所以您需要使用 CSS将要用作背景的 canvas 元素放在页面其余内容的后面。为此，您可以使用 position:absolute and then place it behind everything else with z-index:-1.

定位背景元素

<!DOCTYPE html> 
<html> 
<head> 
  <title>Scrolling Page</title> 
  <style>
    #canvas1 {
      position:absolute;    /* Take the element out of the normal document flow */
      z-index:-1;           /* Place the element behind normal content */
      top:0;                /* Start at top of viewport */
      left:0;               /* Start at left edge of viewport */  
    }
  </style>
</head> 
<body> 
  <canvas id="canvas1"></canvas> 
  <h1>Text</h1>
  <p>text</p>

  <script>
    var can = document.getElementById("canvas1");
    var ctx = can.getContext('2d');
    can.width = 9200; 
    can.height = 630; 
    var img = new Image(); 
    img.src = "https://cdn.pixabay.com/photo/2019/02/19/19/45/thumbs-up-4007573__340.png";
    window.onload = function() { 
      var imgWidth = 0; 
      var scrollSpeed = 10; 
      function loop() { 
        ctx.drawImage(img, imgWidth, 0); 
        ctx.drawImage(img, imgWidth - can.width, 0); 
        imgWidth -= scrollSpeed; 
        if (-imgWidth == can.width) {
            imgWidth = 0; 
        }
        window.requestAnimationFrame(loop); 
      } 
      loop();
    }  
  </script>
</body>
</html>

如何使用 .js 文件作为背景？

How to use a .js file as a background?

javascript

background