canvas鼠标点击定点烟花燃放动画效果代码-html代码-BFW代码库

canvas鼠标点击定点烟花燃放动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas鼠标点击定点烟花燃放动画效果代码

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

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

<head>

    <meta charset="UTF-8">





    <style>
        /* basic styles for black background and crosshair cursor */
        body {
                background: #000;
                margin: 0;
        }
        
        canvas {
                cursor: crosshair;
                display: block;
        }
    </style>



</head>

<body>
    <!-- setup our canvas element -->
    <canvas id="canvas">Canvas is not supported in your browser.</canvas>


    <script>
        // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
        // not supported in all browsers though and sometimes needs a prefix, so we need a shim
        window.requestAnimFrame = function () {
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        }();
        
        // now we will setup our basic variables for the demo
        var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        // full screen dimensions
        cw = window.innerWidth,
        ch = window.innerHeight,
        // firework collection
        fireworks = [],
        // particle collection
        particles = [],
        // starting hue
        hue = 120,
        // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
        limiterTotal = 5,
        limiterTick = 0,
        // this will time the auto launches of fireworks, one launch per 80 loop ticks
        timerTotal = 80,
        timerTick = 0,
        mousedown = false,
        // mouse x coordinate,
        mx,
        // mouse y coordinate
        my;
        
        // set canvas dimensions
        canvas.width = cw;
        canvas.height = ch;
        
        // now we are going to setup our function placeholders for the entire demo
        
        // get a random number within a range
        function random(min, max) {
          return Math.random() * (max - min) + min;
        }
        
        // calculate the distance between two points
        function calculateDistance(p1x, p1y, p2x, p2y) {
          var xDistance = p1x - p2x,
          yDistance = p1y - p2y;
          return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
        }
        
        // create firework
        function Firework(sx, sy, tx, ty) {
          // actual coordinates
          this.x = sx;
          this.y = sy;
          // starting coordinates
          this.sx = sx;
          this.sy = sy;
          // target coordinates
          this.tx = tx;
          this.ty = ty;
          // distance from starting point to target
          this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
          this.distanceTraveled = 0;
          // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
          this.coordinates = [];
          this.coordinateCount = 3;
          // populate initial coordinate collection with the current coordinates
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          }
          this.angle = Math.atan2(ty - sy, tx - sx);
          this.speed = 2;
          this.acceleration = 1.05;
          this.brightness = random(50, 70);
          // circle target indicator radius
          this.targetRadius = 1;
        }
        
        // update firework
        Firework.prototype.update = function (index) {
          // remove last item in coordinates array
          this.coordinates.pop();
          // add current coordinates to the start of the array
          this.coordinates.unshift([this.........完整代码请登录后点击上方下载按钮下载查看