Question

我想使用一个画布作为我的<section>的背景我看到了一些像Use <canvas> as a CSS background这样的帖子并尝试了一些东西，但没有任何作用，我不知道什么是错的。也许它可以通过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();

这是我的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>

Answer 1

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

// 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);

我无法使用画布作为背景

1 个答案: