个人中心
gpt4 book ai didi

javascript - 如何让 Canvas 元素充当背景？

转载 作者：太空宇宙 更新时间：2023-11-03 19:35:58 28 4
gpt4 key购买 nike

我想使用 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>

screenshot

如您所见，我的 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/

28 4 0
文章推荐： matlab - 粒子群优化训练神经网络的概念问题
文章推荐： python - 如何在 Python 中对 Active Directory 服务器进行两阶段身份验证？
文章推荐： c# - .ToARGB() 返回值的范围
文章推荐： Python控制Excel多个实例中的宏
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com