canvas实现五颜六色烟花绽放动画效果代码-html代码-BFW代码库

canvas实现五颜六色烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现五颜六色烟花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
:root {
  --title: "Click Crazy Fireworks";
  --author: "Matt Cannon";
  --contact: "mc@mattcannon.design";
  --description: "Random fireworks over a blank void, as is life. Click like crazy to see the finale!";
  --keywords: "codepenchallenge, cpc-celebration, fireworks, animation, canvas, JavaScript, visual effects, celebration, night sky, particles, interactive, generative art, dynamic display, colorful explosions, seamless animations";
  --last-modified: "2024-12-12";
  --content-language: "en";
  --generator: "HTML5, CSS3, JavaScript";
}

body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  display: block;
}
</style>


  
</head>

<body translate="no">
  
  
      <script >
"use strict";

window.addEventListener("load", function () {
  // Create and configure the canvas
  const canv = document.createElement("canvas");
  canv.style.position = "absolute";
  canv.style.top = "0";
  canv.style.left = "0";
  canv.style.width = "100%";
  canv.style.height = "100%";
  document.body.appendChild(canv);
  const ctx = canv.getContext("2d");

  // Initialize canvas size
  let maxx = window.innerWidth;
  let maxy = window.innerHeight;
  canv.width = maxx;
  canv.height = maxy;

  // Handle window resizing
  window.addEventListener("resize", () => {
    maxx = window.innerWidth;
    maxy = window.innerHeight;
    canv.width = maxx;
    canv.height = maxy;
  });

  // Utility functions for randomness
  const rand = (min, max) => Math.random() * (max - min) + min;
  const randInt = (min, max) => Math.floor(Math.random() * (max - min) + min);
  const randColor = () => `hsl(${randInt(0, 360)}, 100%, 50%)`;

  // Particle class representing individual explosion particles
  class Particle {
    constructor(x, y, color, speed, direction, gravity, friction, size) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.speed = speed;
      this.direction = direction;
      this.vx = Math.cos(direction) * speed;
      this.vy = Math.sin(direction) * speed;
      this.gravity = gravity;
      this.friction = friction;
      this.alpha = 1;
      this.decay = rand(0.005, 0.02); // Ra.........完整代码请登录后点击上方下载按钮下载查看