向网页添加动画 html 画布背景时遇到问题？

问题描述 投票：0回答：1

我正在尝试将以下动画添加到我的网页背景链接到背景，我面临的问题是背景加载在我网页的所有内容之上，至于成为第一个顶层隐藏我在它下面的所有内容和 z-index 也不起作用？请高手指教一下解决办法

我尝试了 z-index 以及画布和容器 div 的定位

<body>
    <canvas id="canvas">
    <h1>Explore what your star sign means and has for you !</h1>
    <div id="container">
        
        <div class="one">
            
        <figure><img src="assets/images/aries.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)" ><h5>March 21 – April 19</h5></figure>
        
    
        <figure><img src="assets/images/taurus.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)" ><h5>April 20 – May 20</h5></figure>
        <figure><img src="assets/images/gemini.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>May 21 – June 20</h5></figure>
        <figure><img src="assets/images/cancer.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>June 21 – July 22</h5></figure>
        <figure><img src="assets/images/leo.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>July 23 – August 22</h5></figure>
        <figure><img src="assets/images/virgo.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>August 23 – September 22</h5></figure>
    </div>
    <div class="two" >
        <figure><img src="assets/images/libra.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>September 23 – October 22</h5></figure>
        <figure><img src="assets/images/scorpio.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>October 23 – November 21</h5></figure>
        <figure><img src="assets/images/sagittarius.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>November 22 – December 21</h5></figure>
        <figure><img src="assets/images/capricorn.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>December 22 – January 19</h5></figure>
        <figure><img src="assets/images/aquarius.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>January 20 – February 18</h5></figure>
        <figure><img src="assets/images/pisces.jpg" alt="" class="gallery-image" onclick="hideOtherImages(this)"><h5>February 19 – March 20</h5></figure>
    </div>
    </div>
    <script>
      function hideOtherImages(clickedImage) {
  var images = document.getElementsByClassName("gallery-image");
  var h5s = document.getElementsByTagName("h5");

  for (var i = 0; i < images.length; i++) {
    if (images[i] !== clickedImage) {
      images[i].style.display = "none";
      h5s[i].style.display = "none"; // Hide the h5 element corresponding to the image
    }
  }
}
    </script>
    <script src="assets/js/bg.js"></script>
</canvas>
</body>
javascript html css animation html5-canvas
1个回答
0
投票

您需要 

z-index: 99999;
和 
position: fixed;
才能显示元素。这是一个干净、美观且最小的示例。

const rand = function(min, max) {
  return Math.random() * (max - min) + min;
}

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'lighter';
});
let backgroundColors = ['#000', '#000'];
let colors = [
  ['#002aff', "#009ff2"],
  ['#0054ff', '#27e49b'],
  ['#202bc5', '#873dcc']
];
let count = 70;
let blur = [12, 70];
let radius = [1, 120];

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';

let grd = ctx.createLinearGradient(0, canvas.height, canvas.width, 0);
grd.addColorStop(0, backgroundColors[0]);
grd.addColorStop(1, backgroundColors[1]);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

let items = [];

while (count--) {
  let thisRadius = rand(radius[0], radius[1]);
  let thisBlur = rand(blur[0], blur[1]);
  let x = rand(-100, canvas.width + 100);
  let y = rand(-100, canvas.height + 100);
  let colorIndex = Math.floor(rand(0, 299) / 100);
  let colorOne = colors[colorIndex][0];
  let colorTwo = colors[colorIndex][1];

  ctx.beginPath();
  ctx.filter = `blur(${thisBlur}px)`;
  let grd = ctx.createLinearGradient(x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius);

  grd.addColorStop(0, colorOne);
  grd.addColorStop(1, colorTwo);
  ctx.fillStyle = grd;
  ctx.fill();
  ctx.arc(x, y, thisRadius, 0, Math.PI * 2);
  ctx.closePath();

  let directionX = Math.round(rand(-99, 99) / 100);
  let directionY = Math.round(rand(-99, 99) / 100);

  items.push({
    x: x,
    y: y,
    blur: thisBlur,
    radius: thisRadius,
    initialXDirection: directionX,
    initialYDirection: directionY,
    initialBlurDirection: directionX,
    colorOne: colorOne,
    colorTwo: colorTwo,
    gradient: [x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius],
  });
}


function changeCanvas(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let adjX = 2;
  let adjY = 2;
  let adjBlur = 1;
  items.forEach(function(item) {

    if (item.x + (item.initialXDirection * adjX) >= canvas.width && item.initialXDirection !== 0 || item.x + (item.initialXDirection * adjX) <= 0 && item.initialXDirection !== 0) {
      item.initialXDirection = item.initialXDirection * -1;
    }
    if (item.y + (item.initialYDirection * adjY) >= canvas.height && item.initialYDirection !== 0 || item.y + (item.initialYDirection * adjY) <= 0 && item.initialYDirection !== 0) {
      item.initialYDirection = item.initialYDirection * -1;
    }

    if (item.blur + (item.initialBlurDirection * adjBlur) >= radius[1] && item.initialBlurDirection !== 0 || item.blur + (item.initialBlurDirection * adjBlur) <= radius[0] && item.initialBlurDirection !== 0) {
      item.initialBlurDirection *= -1;
    }

    item.x += (item.initialXDirection * adjX);
    item.y += (item.initialYDirection * adjY);
    item.blur += (item.initialBlurDirection * adjBlur);
    ctx.beginPath();
    ctx.filter = `blur(${item.blur}px)`;
    let grd = ctx.createLinearGradient(item.gradient[0], item.gradient[1], item.gradient[2], item.gradient[3]);
    grd.addColorStop(0, item.colorOne);
    grd.addColorStop(1, item.colorTwo);
    ctx.fillStyle = grd;
    ctx.arc(item.x, item.y, item.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();

  });
  window.requestAnimationFrame(changeCanvas);

}

window.requestAnimationFrame(changeCanvas);
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 0;
  background: black;
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

#hello-text {
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 72px;
}
<canvas id="canvas"></canvas>
<h1 id="hello-text">Hello</h1>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.