Javascript 我无法使用画布作为背景

我想用一张画布作为我的

的背景，我看到了一些类似这样的帖子，尝试了一些东西，但没有效果，我想不出哪里出了问题。也许可以通过js直接完成

这是我用来创建画布的js

/**/ /* ---- CORE ---- */
/**/var canvas = document.createElement('canvas');
    var firstblock = document.getElementById('ifb');
/**/var context = canvas.getContext('2d');
/**/var windowWidth = canvas.width = document.getElementById("ifb").offsetWidth +1;
/**/var windowHeight = canvas.height = document.getElementById("ifb").offsetHeight +1;
/**/canvas.id = 'canvas';
    firstblock.appendChild(canvas)
/**/ /* ---- CORE END ---- */
/* ---- CREATING ZONE ---- */

/* ---- SETTINGS ---- */
var numberParticlesStart = 100;
var particleSpeed = 20.3;
var velocity = 0.9;
var circleWidth = 200;

/* ---- INIT ---- */
var particles = [];

var getRandomFloat = function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
};

/* ---- Particle ---- */
function Particle(x, y) {
  this.x = x;
  this.y = y;

  this.vel = {
    x: getRandomFloat(-20, 20) / 100,
    y: getRandomFloat(-20, 20) / 100,
    min: getRandomFloat(2, 10),
    max: getRandomFloat(10, 100) / 10
  };

  this.color = 'rgba(255, 255, 255, 0.25)';
}
Particle.prototype.render = function () {
  context.beginPath();
  context.fillStyle = this.color;
  context.arc(this.x, this.y, 1, 0, Math.PI * 2);
  context.fill();
};
Particle.prototype.update = function () {

  var forceDirection = {
    x: getRandomFloat(-1, 1),
    y: getRandomFloat(-1, 1)
  };

  if (Math.abs(this.vel.x + forceDirection.x) < this.vel.max) {
    this.vel.x += forceDirection.x;
  }
  if (Math.abs(this.vel.y + forceDirection.y) < this.vel.max) {
    this.vel.y += forceDirection.y;
  }

  this.x += this.vel.x * particleSpeed;
  this.y += this.vel.y * particleSpeed;

  if (Math.abs(this.vel.x) > this.vel.min) {
    this.vel.x *= velocity;
  }
  if (Math.abs(this.vel.y) > this.vel.min) {
    this.vel.y *= velocity;
  }

  this.testBorder();
};
Particle.prototype.testBorder = function () {
  if (this.x > windowWidth) {
    this.setPosition(this.x, 'x');
  } else if (this.x < 0) {
    this.setPosition(windowWidth, 'x');
  }
  if (this.y > windowHeight) {
    this.setPosition(this.y, 'y');
  } else if (this.y < 0) {
    this.setPosition(windowHeight, 'y');
  }
};
Particle.prototype.setPosition = function (pos, coor) {
  if (coor === 'x') {
    this.x = pos;
  } else if (coor === 'y') {
    this.y = pos;
  }
};

/* ---- Functions ----*/
function loop() {
  var i = void 0;
  var length = particles.length;
  for (i = 0; i < length; i++) {
    particles[i].update();
    particles[i].render();
  }
  requestAnimationFrame(loop);
}

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}
init();
window.onresize = function () {
  windowWidth = canvas.width = window.innerWidth;
  windowHeight = canvas.height = window.innerHeight;
  particles = [];
  context.clearRect(0, 0, windowWidth, windowHeight);
  init();
};


loop();

/***/----核心--*/
/**/var canvas=document.createElement（'canvas'）；
var firstblock=document.getElementById（'ifb'）；
/**/var context=canvas.getContext（'2d'）；
/**/var windowWidth=canvas.width=document.getElementById（“ifb”）.offsetWidth+1；
/**/var windowHeight=canvas.height=document.getElementById（“ifb”）.offsetHeight+1；
/**/canvas.id='canvas'；
firstblock.appendChild（画布）
/**//*----芯端--*/
/*----正在创建区域--*/
/*----设置----*/
var numberparticlessstart=100；
var颗粒速度=20.3；
var速度=0.9；
var circleWidth=200；
/*----INIT----*/
var粒子=[]；
var getRandomFloat=函数getRandomFloat（最小值、最大值）{
返回Math.random（）*（max-min）+min；
};
/*----粒子----*/
函数粒子（x，y）{
这个.x=x；
这个。y=y；
this.vel={
x:getRandomFloat（-20,20）/100，
y:getRandomFloat（-20,20）/100，
最小值：getRandomFloat（2,10），
最大值：getRandomFloat（10100）/10
};
this.color='rgba（255，255，255，0.25）'；
}
Particle.prototype.render=函数（）{
context.beginPath（）；
context.fillStyle=this.color；
弧（this.x，this.y，1,0，Math.PI*2）；
context.fill（）；
};
Particle.prototype.update=函数（）{
变量力方向={
x:getRandomFloat（-1,1），
y:getRandomFloat（-1,1）
};
if（数学绝对值（此.vel.x+forceDirection.x）<此.vel.max）{
此.vel.x+=力方向.x；
}
if（数学绝对值（此.vel.y+力方向.y）<此.vel.max）{
此.vel.y+=力方向.y；
}
这个.x+=这个.vel.x*粒子速度；
this.y+=this.vel.y*粒子速度；
if（Math.abs（this.vel.x）>this.vel.min）{
这个.vel.x*=速度；
}
if（Math.abs（this.vel.y）>this.vel.min）{
这个.vel.y*=速度；
}
这个.testBorder（）；
};
Particle.prototype.testBorder=函数（）{
如果（此.x>窗口宽度）{
这个.setPosition（这个.x，'x'）；
}else if（此.x<0）{
此设置位置（窗口宽度，'x'）；
}
如果（此.y>窗口高度）{
this.setPosition（this.y，'y'）；
}else if（此.y<0）{
此设置位置（窗高“y”）；
}
};
Particle.prototype.setPosition=函数（pos，coor）{
如果（coor=='x'）{
这个.x=pos；
}else if（coor=='y'）{
这个y=pos；
}
};
/*----功能----*/
函数循环（）{
var i=0；
变量长度=粒子长度；
对于（i=0；i

这是我的html

<section style="height:100%;">
    <div class="ip_first_block" id="ifb">

    </div>
</section>

我的一个尝试：

<section style="height:100%;background: -moz-element(#canvas)">
    <div class="ip_first_block" id="ifb">

    </div>
</section>

---

如果要使用画布作为背景，则可以使用分层概念。您可以调整主层后面的画布层。您可以从该代码中获得帮助-

// html

<section>
    <canvas id="canvas" height="300" width="300"></canvas>
    <div></div>
</section>

//css
section {
    position: relative;
} 

canvas {
    border: 1px solid;
    position: absolute;
}

div {
    height: 300px;
    width: 300px;
    position: absolute;
    border: 1px solid red;
}

//js

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

ctx.fillRect(100, 100, 100, 100);

//html
//css
部分{
位置：相对位置；
} 
帆布{
边框：1px实心；
位置：绝对位置；
}
div{
高度：300px；
宽度：300px；
位置：绝对位置；
边框：1px纯红；
}
//js
var dom=document.getElementById（“画布”）；
var ctx=dom.getContext（“2d”）；
ctx.fillRect（100100100100）；