canvas实现一个五彩烟花燃放动画效果代码-html代码-BFW代码库

canvas实现一个五彩烟花燃放动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现一个五彩烟花燃放动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body: {
        	padding: 0;
        }
        
        canvas {
        	display: block;
        }
    </style>




</head>

<body>
    <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
          var canvas = $('#canvas')[0];
          canvas.width = $(window).width();
          canvas.height = $(window).height();
          var ctx = canvas.getContext('2d');
        
          // resize
          $(window).on('resize', function () {
            canvas.width = $(window).width();
            canvas.height = $(window).height();
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
          });
        
          // init
          ctx.fillStyle = '#000';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          // objects
          var listFire = [];
          var listFirework = [];
          var fireNumber = 10;
          var center = { x: canvas.width / 2, y: canvas.height / 2 };
          var range = 100;
          for (var i = 0; i < fireNumber; i++) {
            var fire = {
              x: Math.random() * range / 2 - range / 4 + center.x,
              y: Math.random() * range * 2 + canvas.height,
              size: Math.random() + 0.5,
              fill: '#fd1',
              vx: Math.random() - 0.5,
              vy: -(Math.random() + 4),
              ax: Math.random() * 0.02 - 0.01,
              far: Math.random() * range + (center.y - range) };
        
            fire.base = {
              x: fire.x,
              y: fire.y,
              vx: fire.vx };
        
            //
            listFire.push(fire);
          }
        
          function randColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = 'rgb($r, $g, $b)';
            color = color.replace('$r', r);
            color = color.replace('$g', g);
            color = color.replace('$b', b);
            return color;
          }
        
          (function loop() {
            requestAnimationFrame(loop);
            update();
            draw();
          })();
        
          function update() {
            for (var i = 0; i < listFire.length; i++) {
              var fire = listFire[i];
              //
              if (fire.y <= fire.far) {
                // case add firework
                var color = randColor();
  .........完整代码请登录后点击上方下载按钮下载查看