javascript - 如何在画布背景上显示 DIV

Question

我有漂亮的美丽星星画布背景脚本，我想知道如何在该画布脚本上显示一个 DIV。

我尝试将 DIV 放在画布标签中或下方（您可以在下面的链接中看到结果），但它什么也不显示，或者以您无法看到的方式将它放在页面底部。

这是我的代码：

HTML：

<canvas></canvas>
<div style="background-color:red">this is a test</div>

CSS：

body{
  margin: 0;
  overflow: hidden; 
  background: black
}

JS：

var n_stars = 150
var colors = [ '#176ab6', '#fb9b39']
for ( let i = 0; i < 98; i++) {
  colors.push( '#fff')
}

var canvas = document.querySelector('canvas')
canvas.width = innerWidth
canvas.height = innerHeight

addEventListener( 'resize', () => {
  canvas.width = innerWidth
  canvas.height = innerHeight
  stars = []
  init()
})

canvas.style.background = '#000'
var c = canvas.getContext('2d')

const randomInt = ( max, min) => Math.floor( Math.random() * (max - min) + min)

var bg = c.createRadialGradient( canvas.width/ 2, canvas.height * 3, canvas.height ,canvas.width/ 2,canvas.height , canvas.height * 4);
bg.addColorStop(0,"#32465E");
bg.addColorStop(.4,"#000814");
bg.addColorStop(.8,"#000814");
bg.addColorStop(1,"#000");

class Star {
  constructor( x, y, radius, color) {
    this.x = x || randomInt( 0, canvas.width)
    this.y = y || randomInt( 0, canvas.height)
    this.radius = radius || Math.random() * 1.1
    this.color = color || colors[randomInt(0, colors.length)]
    this.dy = -Math.random() * .3
  }
  draw () {
    c.beginPath()
    c.arc( this.x, this.y, this.radius, 0, Math.PI *2 )
    c.shadowBlur = randomInt( 3, 15)
    c.shadowColor = this.color
    c.strokeStyle = this.color
    c.fillStyle = 'rgba( 255, 255, 255, .5)'
    c.fill()
    c.stroke()
    c.closePath()
  }
  update( arrayStars = [] ) {
    if ( this.y - this.radius < 0 ) this.createNewStar( arrayStars )

    this.y += this.dy
    this.draw()
  }
  createNewStar( arrayStars = [] ) {
    let i = arrayStars.indexOf( this )
    arrayStars.splice( i, 1)
    arrayStars.push( new Star( false, canvas.height + 5))
  }
}
var stars = []
function init() {
  for( let i = 0; i < n_stars; i++ ) {
    stars.push( new Star( ) )
  }
}
init()

function animate() {
  requestAnimationFrame( animate)
  c.clearRect( 0, 0, canvas.width, canvas.height)
  c.fillStyle = bg
  c.fillRect(0, 0, canvas.width, canvas.height)
  stars.forEach( s => s.update( stars ))
}
animate()

这是一个现场直播：Codepen

标签： javascripthtmlcsssvgcanvas

Answer 1

你的意思是这样的（使用包装元素并将 div 绝对定位在画布元素之上）：

var n_stars = 150
var colors = [ '#176ab6', '#fb9b39']
for ( let i = 0; i < 98; i++) {
  colors.push( '#fff')
}

var canvas = document.querySelector('canvas')
canvas.width = innerWidth
canvas.height = innerHeight

addEventListener( 'resize', () => {
  canvas.width = innerWidth
  canvas.height = innerHeight
  stars = []
  init()
})

canvas.style.background = '#000'
var c = canvas.getContext('2d')

const randomInt = ( max, min) => Math.floor( Math.random() * (max - min) + min)

var bg = c.createRadialGradient( canvas.width/ 2, canvas.height * 3, canvas.height ,canvas.width/ 2,canvas.height , canvas.height * 4);
bg.addColorStop(0,"#32465E");
bg.addColorStop(.4,"#000814");
bg.addColorStop(.8,"#000814");
bg.addColorStop(1,"#000");

class Star {
  constructor( x, y, radius, color) {
    this.x = x || randomInt( 0, canvas.width)
    this.y = y || randomInt( 0, canvas.height)
    this.radius = radius || Math.random() * 1.1
    this.color = color || colors[randomInt(0, colors.length)]
    this.dy = -Math.random() * .3
  }
  draw () {
    c.beginPath()
    c.arc( this.x, this.y, this.radius, 0, Math.PI *2 )
    c.shadowBlur = randomInt( 3, 15)
    c.shadowColor = this.color
    c.strokeStyle = this.color
    c.fillStyle = 'rgba( 255, 255, 255, .5)'
    c.fill()
    c.stroke()
    c.closePath()
  }
  update( arrayStars = [] ) {
    if ( this.y - this.radius < 0 ) this.createNewStar( arrayStars )

    this.y += this.dy
    this.draw()
  }
  createNewStar( arrayStars = [] ) {
    let i = arrayStars.indexOf( this )
    arrayStars.splice( i, 1)
    arrayStars.push( new Star( false, canvas.height + 5))
  }
}
var stars = []
function init() {
  for( let i = 0; i < n_stars; i++ ) {
    stars.push( new Star( ) )
  }
}
init()

function animate() {
  requestAnimationFrame( animate)
  c.clearRect( 0, 0, canvas.width, canvas.height)
  c.fillStyle = bg
  c.fillRect(0, 0, canvas.width, canvas.height)
  stars.forEach( s => s.update( stars ))
}
animate()

body{
  margin: 0;
  overflow: hidden; 
  background: black
}
.wrapper{
position: relative;
display: block;
}
.wrapper > canvas {
position: relative;
display: block;
}
.wrapper > div {
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
display: block;
}

<div class="wrapper">
<canvas></canvas>
<div style="background-color:red">this is a test</div>
</div>