canvas立体多彩烟花绽放动画效果代码-html代码-BFW代码库

canvas立体多彩烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas立体多彩烟花绽放动画效果代码

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

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

<head>

    <meta charset="UTF-8">



    <style>
        body{
          background:black;
          overflow:hidden;
          margin:0;
        }
        canvas{
          background:#000;
        }
    </style>




</head>

<body>
    <div>
        <canvas id="canvas"></canvas>
    </div>


    <script>
        window.addEventListener("resize", resizeCanvas, false);
        window.addEventListener("DOMContentLoaded", onLoad, false);
        
        window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
        
        var canvas,ctx,w,h,particles = [],probability = 0.04,
        xPoint,yPoint;
        
        
        
        
        
        function onLoad() {
          canvas = document.getElementById("canvas");
          ctx = canvas.getContext("2d");
          resizeCanvas();
        
          window.requestAnimationFrame(updateWorld);
        }
        
        function resizeCanvas() {
          if (!!canvas) {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
          }
        }
        
        function updateWorld() {
          update();
          paint();
          window.requestAnimationFrame(updateWorld);
        }
        
        function update() {
          if (particles.length < 500 && Math.random() < probability) {
            createFirework();
          }
          var alive = [];
          for (var i = 0; i < particles.length; i++) {
            if (particles[i].move()) {
              alive.push(particles[i]);
            }
          }
          particles = alive;
        }
        
        function paint() {
          ctx.globalCompositeOperation = 'source-over';
          ctx.fillStyle = "rgba(0,0,0,0.2)".........完整代码请登录后点击上方下载按钮下载查看