在 DIV 后面显示画布

Question

这个问题的标题是相对不言自明的。 我希望画布位于页面的背景中，而页面的内容则从通常的位置开始。 我尝试用自己的 Z-index 为每个人制作一个 DIV，但这没有做任何事情。

我需要想办法将画布发回，我将主体背景颜色设为红色，因此只需要两层（雪和内容）而不是三层（包括背景）。

我只需要它，以便内容像任何普通页面一样显示在顶部，雪应该是随着页面滚动而出现的背景元素。

 (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); var flakes = [], canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), flakeCount = 400, mX = -100, mY = -100 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30, step: 0, opacity: opacity }); } snow(); }; canvas.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize",function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; }) init();

 body, html{ margin:0; padding:0; overflow-x: hidden; user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: #E71D36; } .page { min-width: 100%; max-width: 100%; z-index: -1; } .contentwrap { min-width: 100%; max-width: 100%; z-index: 1; } .content { min-width: 50%; max-width: 50%; margin-left: auto; margin-right: auto; text-align: center; z-index: 1; } @media only screen and (max-width: 500px) { .content { min-width: 90%; max-width: 90%; margin-left: auto; margin-right: auto; text-align: center; z-index: 1; } } .canvas-holder { z-index: 0; } .canvas { z-index: -1; }

 <div class="page"> <div class-"canvas-holder"> <canvas id="canvas"> </canvas> </div> <div class="content"> <h1>Content is below the canvas</h1> </div> </div>

任何提示将不胜感激。

Answer 1

使用position: absolute用于canvas和content 。 我对.content css 进行了一些其他更改以将文本居中（并将class="canvas"添加到画布 html）。 我还删除了z-index因为如果您使用绝对定位，则不需要它。

你在评论中问：

任何想法如何使画布成为页面的高度，而不仅仅是窗口。 这也将不胜感激

一种选择是使用position: fixed ，这将在页面滚动时保持画布位置固定。

请参阅更新的片段。

 (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); var flakes = [], canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), flakeCount = 400, mX = -100, mY = -100 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30, step: 0, opacity: opacity }); } snow(); }; canvas.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize",function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; }) init();

 body, html{ margin:0; padding:0; overflow-x: hidden; user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: #E71D36; } .page { min-width: 100%; max-width: 100%; } .contentwrap { min-width: 100%; max-width: 100%; } .content { min-width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; position: absolute; left: 0; right: 0; } @media only screen and (max-width: 500px) { .content { min-width: 90%; max-width: 90%; margin-left: auto; margin-right: auto; text-align: center; } } .canvas-holder { } .canvas { position: fixed; }

 <div class="page"> <div class="canvas-holder"> <canvas id="canvas" class="canvas"> </canvas> </div> <div class="content"> <h1>Content is below the canvas</h1> <p style="height: 900px;"></p> </div> </div>