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 canv.........完整代码请登录后点击上方下载按钮下载查看