Question

我刚刚开始在我的新学校编码，我正在建立一个网站作为我的第一个项目。现在我试图让这个“矩阵”动画显示为我的背景（主要是用javascript制作），但我不能让它工作。任何人都可以帮我解决这个问题吗？如果它甚至可能，那就是。谢谢。（我知道代码有点混乱......第一次发帖，不知道怎么做）

HTML

<div class="inhoud">
  <div id="container">
    <div id="over_stuff">
      Here's some stuff over #pixie!
    </div>
    <canvas id="c"></canvas>
  </div>
</div>

CSS

  /*basic reset*/

  #container {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  #c {
    z-index: 0;
    background: #010222;
    background:
  }

  #over_stuff {
    color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    padding: 10px;
  }

  * {
    margin: 0;
    padding: 0;
  }
  /*adding a black bg to the body to make things clearer*/

  body {
    background: black;
  }

  canvas {
    display: block;
  }

的Javascript

  var c = document.getElementById("c");
  var ctx = c.getContext("2d");

  //making the canvas full screen
  c.height = window.innerHeight;
  c.width = window.innerWidth;

  //chinese characters - taken from the unicode charset
  var chinese = "dirk";
  //converting the string into an array of single characters
  chinese = chinese.split("");

  var font_size = 10;
  var columns = c.width / font_size; //number of columns for the rain
  //an array of drops - one per column
  var drops = [];
  //x below is the x coordinate
  //1 = y co-ordinate of the drop(same for every drop initially)
  for (var x = 0; x < columns; x++)
    drops[x] = 1;

  //drawing the characters
  function draw() {
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#555"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for (var i = 0; i < drops.length; i++) {
      //a random chinese character to print
      var text = chinese[Math.floor(Math.random() * chinese.length)];
      //x = i*font_size, y = value of drops[i]*font_size
      ctx.fillText(text, i * font_size, drops[i] * font_size);

      //sending the drop back to the top randomly after it has crossed the screen
      //adding a randomness to the reset to make the drops scattered on the Y axis
      if (drops[i] * font_size > c.height && Math.random() > 0.975)
        drops[i] = 0;

      //incrementing Y coordinate
      drops[i]++;
    }
  }

  setInterval(draw, 33);

Answer 1

我固定了它！所需要的只是添加
位置：固定到代码，然后给出一个-10的z索引。感谢您抽出时间来查看我的代码;）

我有一个问题，设置一段JavaScript代码作为背景

1 个答案: