Question

＆＃13;

var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
NUM_CONFETTI = 350;
COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
PI_2 = 2 * Math.PI;
canvas = document.getElementById("world");
context = canvas.getContext("2d");
window.w = 0;
window.h = 0;
resizeWindow = function() {
  window.w = canvas.width = window.innerWidth;
  return window.h = canvas.height = window.innerHeight;
};
window.addEventListener('resize', resizeWindow, false);
window.onload = function() {
  return setTimeout(resizeWindow, 0);
};
range = function(a, b) {
  return (b - a) * Math.random() + a;
};
drawCircle = function(x, y, r, style) {
  context.beginPath();
  context.arc(x, y, r, 0, PI_2, false);
  context.fillStyle = style;
  return context.fill();
};
xpos = 0.5;
document.onmousemove = function(e) {
  return xpos = e.pageX / w;
};
window.requestAnimationFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    return window.setTimeout(callback, 1000 / 60);
  };
})();
Confetti = (function() {
  function Confetti() {
    this.style = COLORS[~~range(0, 5)];
    this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
    this.r = ~~range(2, 6);
    this.r2 = 2 * this.r;
    this.replace();
  }
  Confetti.prototype.replace = function() {
    this.opacity = 0;
    this.dop = 0.03 * range(1, 4);
    this.x = range(-this.r2, w - this.r2);
    this.y = range(-20, h - this.r2);
    this.xmax = w - this.r;
    this.ymax = h - this.r;
    this.vx = range(0, 2) + 8 * xpos - 5;
    return this.vy = 0.7 * this.r + range(-1, 1);
  };
  Confetti.prototype.draw = function() {
    var _ref;
    this.x += this.vx;
    this.y += this.vy;
    this.opacity += this.dop;
    if (this.opacity > 1) {
      this.opacity = 1;
      this.dop *= -1;
    }
    if (this.opacity < 0 || this.y > this.ymax) {
      this.replace();
    }
    if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
      this.x = (this.x + this.xmax) % this.xmax;
    }
    return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
  };
  return Confetti;
})();
confetti = (function() {
  var _results;
  _results = [];
  for (i = 1; 1 <= NUM_CONFETTI ? i <= NUM_CONFETTI : i >= NUM_CONFETTI; 1 <= NUM_CONFETTI ? i++ : i--) {
    _results.push(new Confetti);
  }
  return _results;
})();
window.step = function() {
  var c, _i, _len, _results;
  requestAnimationFrame(step);
  context.clearRect(0, 0, w, h);
  _results = [];
  for (_i = 0, _len = confetti.length; _i < _len; _i++) {
    c = confetti[_i];
    _results.push(c.draw());
  }
  return _results;
};
step();

＆＃13;

header {
	color: gainsboro;
	text-align: center;
	font-size: 100px;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}
canvas {
  z-index:-1;
}

＆＃13;

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Falling Confetti</title>
    <link rel="stylesheet" href="css/style.css"> 
  </head>
  <body>
    <canvas id="world"></canvas>
    <script src="js/index.js"></script>
	  <header>Video Game Evolution</header>
	  <iframe src='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1z5bofC1Vo2wfXVUtAJHp-_o_tvymManjPeX8c4pNAp0&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650' frameborder='0'></iframe>
  </body>
</html>

＆＃13;

它开始显示标题，但画布挡住了。我还有一个嵌入式时间轴，我希望在画布上显示。这是js吗？ -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------

Answer 1

让你的画布绝对定位，给它一个合适的尺寸，你应该得到你想要的

canvas {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

注意：摆脱画布上的z-index css ...这会把它放在身体后面，身体有背景，所以隐藏画布

你如何在你的元素后面放置一个动画画布？

1 个答案: