帮我写一个界面，js编写，带一个烟花特效，底下有红色矩形，里面写着“hello world”

好的，以下是一个简单的实现：

HTML代码：

<div id="container">
  <canvas id="firework"></canvas>
  <div id="text-container">
    <div id="text-box">
      <div id="text">Hello World</div>
    </div>
  </div>
</div>

CSS代码：

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  height: 100vh;
}

#firework {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: red;
}

#text-box {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#text {
  color: white;
  font-size: 36px;
  font-weight: bold;
}

JavaScript代码：

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建烟花粒子
function createParticle(x, y, color) {
  var particle = {};

  particle.x = x;
  particle.y = y;
  particle.color = color;

  particle.vel = {};
  particle.vel.x = Math.random() * 10 - 5;
  particle.vel.y = Math.random() * 10 - 5;

  particle.size = 5;

  return particle;
}

// 创建烟花
function createFirework(x, y) {
  var firework = {};

  firework.x = x;
  firework.y = y;

  firework.particles = [];

  firework.color = "hsl(" + Math.random() * 360 + ", 100%, 50%)";

  for (var i = 0; i < 50; i++) {
    var particle = createParticle(x, y, firework.color);
    firework.particles.push(particle);
  }

  return firework;
}

// 更新烟花粒子位置
function updateParticle(particle) {
  particle.x += particle.vel.x;
  particle.y += particle.vel.y;

  particle.vel.y += 0.1;

  particle.size -= 0.05;

  if (particle.size < 0) {
    particle.size = 0;
  }
}

// 更新烟花粒子数组
function updateParticles(particles) {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];
    updateParticle(particle);
  }
}

// 渲染烟花粒子
function renderParticle(particle) {
  ctx.beginPath();
  ctx.fillStyle = particle.color;
  ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
  ctx.fill();
}

// 渲染烟花粒子数组
function renderParticles(particles) {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];
    renderParticle(particle);
  }
}

// 更新烟花数组
function updateFireworks(fireworks) {
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];
    updateParticles(firework.particles);
  }
}

// 渲染烟花数组
function renderFireworks(fireworks) {
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];
    renderParticles(firework.particles);
  }
}

// 删除烟花
function removeFirework(fireworks, firework) {
  var index = fireworks.indexOf(firework);
  fireworks.splice(index, 1);
}

// 主循环
function loop(fireworks) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  renderFireworks(fireworks);
  updateFireworks(fireworks);

  // 每秒钟创建一个烟花
  if (Math.random() < 0.02) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var firework = createFirework(x, y);
    fireworks.push(firework);
  }

  // 删除已经烧完的烟花
  for (var i = 0; i < fireworks.length; i++) {
    var firework = fireworks[i];

    if (firework.particles.length === 0) {
      removeFirework(fireworks, firework);
    }
  }

  requestAnimationFrame(function() {
    loop(fireworks);
  });
}

// 启动主循环
var fireworks = [];
loop(fireworks);

这个程序会在页面上创建一个带有“Hello World”文本的红色矩形，并在背景中播放烟花效果。