canvas定点燃放烟花效果代码-html代码-BFW代码库

代码语言：html

所属分类：上传

代码描述：canvas定点燃放烟花效果代码，鼠标点击屏幕任意位置即可发射烟花。

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

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

<head>

    <meta charset="UTF-8">



    <style>
        * { margin: 0; padding: 0; }
        
        html, body { height: 100%; }
        
        body {
          background: #000;
        }
        
        canvas {
          display: block;
          cursor: crosshair;
        }
    </style>

</head>

<body>
    <canvas id="canvas">Canvas is not supported by your browser.</canvas>

    <script >
        // Options
        var options = {
          /* Which hue should be used for the first batch of rockets? */
          startingHue: 120,
          /* How many ticks the script should wait before a new firework gets spawned, if the user is holding down his mouse button. */
          clickLimiter: 5,
          /* How fast the rockets should automatically spawn, based on ticks */
          timerInterval: 40,
          /* Show pulsing circles marking the targets? */
          showTargets: true,
          /* Rocket movement options, should be self-explanatory */
          rocketSpeed: 2,
          rocketAcceleration: 1.03,
          /* Particle movement options, should be self-explanatory */
          particleFriction: 0.95,
          particleGravity: 1,
          /* Minimum and maximum amount of particle spawns per rocket */
          particleMinCount: 25,
          particleMaxCount: 40,
          /* Minimum and maximum radius of a particle */
          particleMinRadius: 3,
          particleMaxRadius: 5 };
        
        
        // Local variables
        var fireworks = [];
        var particles = [];
        var mouse = { down: false, x: 0, y: 0 };
        var currentHue = options.startingHue;
        var clickLimiterTick = 0;
        var timerTick = 0;
        var cntRocketsLaunched = 0;
        
        // Helper function for canvas animations
        window.requestAnimFrame = function () {
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function (cb) {
            window.setTimeout(callback, 1000 / 60);
          };
        }();
        
        // Helper function to return random numbers within a specified range
        function random(min, max) {
          return Math.random() * (max - min) + min;
        }
        
        // Helper function to calculate the distance between 2 points
        function calculateDistance(p1x, p1y, p2x, p2y) {
          var xDistance = p1x - p2x;
          var yDistance = p1y - p2y;
          return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
        }
        
        // Setup some basic variables
        var canvas = document.getElementById('canvas');
        var canvasCtx = canvas.getContext('2d');
        var canvasWidth = window.innerWidth;
        var canvasHeight = window.innerHeight;
        
        // Resize canvas
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        // Firework class
        function Firework(sx, sy, tx, ty) {
          // Set coordinates (x/y = actual, sx/sy = starting, tx/ty = target)
          this.x = this.sx = sx;
          this.y = this.sy = sy;
          this.tx = tx;this.ty = ty;
        
          // Calculate distance between starting and target point
          this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
          this.distanceTraveled = 0;
        
          // To simulate a trail effect, the last few coordinates will be stored
          this.coordinates = [];
          this.coordinateCount = 3;
        
          // Populate coordinate array with initial data
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          }
        
          // Some settings, you can adjust them if you'd like to do so.
          this.angle = Math.atan2(ty - sy, tx - sx);
          this.speed = options.rocketSpeed;
          this.acceleration = options.rocketAcceleration;
          this.brightness = random(50, 80);
          this.hue = currentHue;
          this.targetRadius = 1;
          this.targetDirection = false; // false = Radius is getting bigger, true = Radius is getting smaller
        
          // Increase the rockets launched counter
          cntRocketsLaunched++;
        };
        
        // This method should be called each frame to update the firework
        Firework.prototype.update = function (index) {
          // Update the coordinates array
          this.coordinates.pop();
          this.coordinates.unshift([this.x, this.y]);
        
          // Cycle the target radius (used for the pulsing target circle)
          if (!this.targetDirection) {
            if (this.targetRadius < 8)
            this.targetRadius += 0.15;else
        
            this.targetDirection = true;
          } else {
            if (this.targetRadius > 1)
            this.targetRadius -= 0.15;else
        
            this.targetDirection = false;
          }
        
          // Speed up the firework (could possibly travel faster than the speed of light) 
          this.speed *= this.acceleration;
        
          // Calculate the distance the firework has travelled so far (based on velocities)
          var vx = Math.cos(this.angle) * this.speed;
          var vy = Math.sin(this.angle) * this.speed;
          this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
        
          // If the distance traveled (including velocities) is greater than the initial distance
          // to the target, then the target has been reached. If that's not the case, keep traveling.
          if (this.distanceTraveled >= this.distanceToTarget) {
            createParticles(this.tx, this.ty);
            fireworks.splice(index, 1);
          } else {
            this.x += vx;
            this.y += vy;
          }
        };
        
        // Draws the firework
        Firework.prototype.draw = function () {
          var lastCoordinate = this.coordinates[this.coordinates.length - 1];
        
          // Draw the rocket
          canvasCtx.beginPath();
          canvasCtx.moveTo(lastCoordinate[0], lastCoordinate[1]);
          canvasCtx.lineTo(this.x, this.y);
          canvasCtx.strokeStyle = 'hsl(' + this.hue + ',100%,' + this.brightness + '%)';
          canvasCtx.stroke();
        
          // Draw the target (pulsing circle)
          if (options.showTargets) {
   .........完整代码请登录后点击上方下载按钮下载查看