Question

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

我如何制作＆＃34;我们为有所作为的公司和非营利组织制作品牌体验。＆＃34;出现在背景之上？

＆＃13;

    <!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>

＆＃13;

如您所见，我的h1标记不在背景之上。

Answer 1

如果我正确理解您的问题，那么您实际上希望将画布作为您网页的背景。这可以通过利用CSS z-index属性来完成：

＆＃13;

///////////////////////////////////////////////
//  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
  }
}

＆＃13;

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; 
}

＆＃13;

    <!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>

＆＃13;

至于你决定如何在页面上放置h1，这取决于你，但你放在wrapup div内的任何东西都会出现在画布上。

Answer 2

将<h1>更改为

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

您可以调整500px和300px值，将其移动到屏幕上的其他位置。您还可以使用％和margin的组合自动居中元素，例如：

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

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

如何将canvas元素作为背景？

2 个答案: