Как использовать файл. js в качестве фона? - PullRequest
Новая
       7

Как использовать файл. js в качестве фона?

0 голосов
/ 16 апреля 2020

У меня есть файл. 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 is: 

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();

1 Ответ

0 голосов
/ 16 апреля 2020

Поскольку речь идет не об использовании в качестве фона только изображения, а вместо анимируемого элемента HTML canvas, вам потребуется использовать CSS для наложения слоя элемента canvas, который вы хочу использовать в качестве фона позади остального содержимого страницы. Для этого вы можете поместить элемент фона с помощью position:absolute, а затем поместить его позади всего остального с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...