我想使用 canvas 元素作为我页面的背景。
我怎样才能做到“我们为公司和非营利组织打造与众不同的品牌体验。”显示在背景之上？
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Confetti Party</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/index.js"></script>
<h1>we craft brand experiences for companies and nonprofits making a difference. </h1>
</body>
</html> 
如您所见，我的 h1 标签不在 background 之上。
最佳答案
如果我对您的问题的理解正确，那么您实际上是想将 Canvas 设为页面的背景。这很简单，可以利用 CSS z-index 属性来完成:
///////////////////////////////////////////////
// configurables
///////////////////////////////////////////////
// background color
// var bg = [159, 240, 167]
var bg = [255, 255, 225]
// maximum number of particles present at any time
var num_particles = 150
// chace of split
var chance_birth = 0.37
// chance of termination/death
var chance_death = 0.38
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']
///////////////////////////////////////////////
// the other stuff
///////////////////////////////////////////////
//var canvas = document.createElement("canvas")
//document.getElementsByTagName("body")[0].appendChild(canvas)
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var particles = []
var step = 0
var step_max = 360
setup()
window.addEventListener("resize", setup)
function setup() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
fill(1)
}
function fill(amt) {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
ctx.fill()
}
setInterval(animate, 1000/60)
// window.requestAnimationFrame(animate);
function animate() {
fill(0.01)
step = (step + 1) % step_max
draw()
// window.requestAnimationFrame(function(){animate()})
}
function getRandCol () {
return cols[Math.floor(Math.random() * cols.length)]
}
function draw() {
var pad = 0.02
var p
if (particles.length < num_particles && step % 2 === 0) {
var x = (Math.random() * (1 - pad * 2) + pad) * canvas.width
var y = canvas.height + Math.random()*10 //(Math.random() * (1 - pad * 2) + pad) * canvas.height
p = new Particle(x, y, ctx)
particles.push(p)
}
var i
for (i = 0; i < particles.length; i++) {
particles[i].update()
particles[i].draw()
// branch-birth
if (step % 4 === 0 && Math.random() < chance_birth && particles.length < num_particles) {
var x = particles[i].x
var y = particles[i].y
p = new Particle(x, y, ctx)
p.color = particles[i].color
particles.push(p)
}
}
// death
for (i = particles.length -1 ; i >= 0; i--) {
p = particles[i]
if ((step % 4 === 0 && Math.random() < chance_death) || p.y < -20 || p.x < -20 || p.x > canvas.width + 20) {
particles.splice(i, 1)
}
}
// draw links
var dist_max = 60
for (i = particles.length -1 ; i >= 0; i--) {
p = particles[i]
}
}
function Particle (x, y, ctx) {
this.x = x
this.y = y
this.px = x
this.py = y
this.dx_min = -20
this.dx_max = 20
this.dy_min = -1
this.dy_max = -25
this.s = 0.8
this.ctx = ctx
this.color = getRandCol() //"#ee9977"
this.update = function () {
this.px = this.px * this.s + this.x * (1 - this.s)
this.py = this.py * this.s + this.y * (1 - this.s)
var dxy = this.dxy()
this.x = this.s * this.x + (Math.random() * dxy.dx + this.x) * (1 - this.s)
this.y = this.s * this.y + (Math.random() * dxy.dy + this.y) * (1 - this.s)
}
this.draw = function () {
// var v = Math.min(this.vsq(), 500)
ctx.lineWidth = 2 //Math.sqrt(v)/3
ctx.beginPath()
ctx.moveTo(this.px, this.py)
ctx.strokeStyle = this.color
ctx.lineTo(this.x, this.y)
ctx.lineCap = "round"
ctx.stroke()
}
this.dxy = function () {
var dx = (this.dx_max - this.dx_min) * Math.random() + this.dx_min
var dy = (this.dy_max - this.dy_min) * Math.random() + this.dy_min
return {dx, dy}
}
this.vsq = function () {
var x = this.px - this.x
var y = this.py - this.y
return x * x + y * y
}
}canvas{
/* Move the canvas to a low z-index (background) */
z-index: -1;
}
.wrapup{
/* This class creates a div that is positioned on top of everything outside of it */
width:100%;
height:100%;
z-index:100;
display:block;
overflow:hidden;
margin:0;
border:0;
padding:0;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
body {
/* Just some stuff to clean up the look by filling page and removing scrollbars */
width:100%;
height: 100%;
overflow: hidden;
} <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Confetti Party</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/index.js"></script>
<div class="wrapup">
<h1>we craft brand experiences for companies and nonprofits making a difference. </h1>
</div>
</body>
</html>至于如何决定 h1 在页面上的位置，这取决于您，但是您放置在 wrapup div 中的任何内容都会出现在 Canvas 上。
关于javascript - 如何让 Canvas 元素充当背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47242265/