Javascript 如何使画布元素充当背景？

我想使用canvas元素作为页面的背景

我如何才能让“我们为公司和非营利组织打造与众不同的品牌体验”出现在背景之上

五彩纸屑派对
我们为公司和非营利组织打造品牌体验，让他们与众不同。

将

更改为

<h1 style="position:fixed; top:500px; left:300px;">

---

如果您希望文本随页面向下滚动，请使用position:absolute。

如果我正确理解了您的问题，那么您实际上希望将画布作为页面的背景。通过利用CSS

z-index

属性可以实现这一点：

///////////////////////////////////////////////
//可配置
///////////////////////////////////////////////
//背景色
//var bg=[159240167]
变量bg=[255，255，225]
//任何时候出现的最大粒子数
var num_粒子数=150
//劈裂面
var chance_出生率=0.37
//终止/死亡的机会
var chance_death=0.38
var cols=['#FF5722'、'#FF9800'、'#FF9800'、'#FF9800'、'#FF9800'、'#B71C1C'、'#00BCD4'、'00BCD4'、'009688']
///////////////////////////////////////////////
//其他的东西
///////////////////////////////////////////////
//var canvas=document.createElement（“画布”）
//document.getElementsByTagName（“正文”）[0].appendChild（画布）
var canvas=document.getElementById（“画布”）
var ctx=canvas.getContext（“2d”）
变量粒子=[]
var步长=0
var阶跃_max=360
设置（）
window.addEventListener（“调整大小”，设置）
函数设置（）{
canvas.width=window.innerWidth
canvas.height=window.innerHeight
填充（1）
}
函数填充（amt）{
ctx.beginPath（）；
ctx.rect（0，0，canvas.width，canvas.height）
ctx.fillStyle=`rgba（${bg[0]}，${bg[1]}，${bg[2]}，${amt}）`
ctx.fill（）
}
设置间隔（动画，1000/60）
//window.requestAnimationFrame（动画）；
函数animate（）{
填充（0.01）
步骤=（步骤+1）%step\u max
画（）
//window.requestAnimationFrame（函数（）{animate（）}）
}
函数getRandCol（）{
返回cols[Math.floor（Math.random（）*cols.length）]
}
函数绘图（）{
var pad=0.02
var p
if（particles.length=0；i--）{
p=粒子[i]
如果（（步骤%4==0&&Math.random（）canvas.width+20）{
粒子.拼接（i，1）
}
}
//绘制链接
var dist_max=60
对于（i=particles.length-1；i>=0；i--）{
p=粒子[i]
}
}
功能粒子（x，y，ctx）{
这个。x=x
这个。y=y
这个.px=x
this.py=y
this.dx_min=-20
此.dx_max=20
this.dy_min=-1
这个.dy_max=-25
这个.s=0.8
this.ctx=ctx
this.color=getRandCol（）/“#ee9977”
this.update=函数（）{
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=函数（）{
//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=“圆形”
ctx.stroke（）
}
this.dxy=函数（）{
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
返回{dx，dy}
}
this.vsq=函数（）{
var x=this.px-this.x
var y=this.py-this.y
返回x*x+y*y
}
}

画布{
/*将画布移动到低z索引（背景）*/
z指数：-1；
}
wrapup先生{
/*这个类创建一个div，该div位于它之外的所有对象之上*/
宽度：100%；
身高：100%；
z指数：100；
显示：块；
溢出：隐藏；
保证金：0；
边界：0；
填充：0；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
身体{
/*只是一些东西，通过填充页面和删除滚动条来清理外观*/
宽度：100%；
身高：100%；
溢出：隐藏；
}

五彩纸屑派对
我们为公司和非营利组织打造品牌体验，让他们与众不同。

如果你不想把它放在下面，就把它放在画布上方。我对这个问题做了一些格式编辑，但我保留了原样，因为我不确定我是否理解你的问题。是否尝试在呈现的HTML页面中重新定位此文本？（如果是的话，你到底想把它放在哪里？）你所说的“在风格的顶端，而不是在任何地方”是什么意思？@DanielBeck非常感谢你对格式的编辑。我真的很抱歉我的英语，我自己也编辑了一点问题。请再调查一下。各位，如果你们投了反对票，请给出一个理由好吗？我很确定我的答案是OP问的！我想他们投了反对票，因为这是一种没有反应的攻击。一切都很好，但不值得添加一个

位置：relative

到

画布

元素css（以防万一）？我们之间有什么区别吗

top:50%; margin-top:-6em;