js实现canvas点击空间粒子爆炸效果代码-html代码-BFW代码库

js实现canvas点击空间粒子爆炸效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas点击空间粒子爆炸效果代码

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

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

<head>

    <meta charset="UTF-8">


    <link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>



    <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          cursor: pointer;
        }
        canvas {
          border: 1px soild black;
        }
        h1 {
          display: inline-block;
          padding: .3em;
          font-family: 'Megrim', cursive;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          transform: translate(-50%,-50%);
          color: rgba(255,255,255,.68);
          border: .075em solid rgba(255,255,255,.1);
        }
    </style>




</head>

<body>
    <canvas id="canvas"></canvas>
    <h1>Click Anywhere</h1>


    <script>
        // Little Canvas things
        var canvas = document.querySelector("#canvas"),
        ctx = canvas.getContext('2d');
        
        // Set Canvas to be window size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Configuration, Play with these
        var config = {
          particleNumber: 800,
          maxParticleSize: 10,
          maxSpeed: 40,
          colorVariation: 50 };
        
        
        // Colors
        var colorPalette = {
          bg: { r: 12, g: 9, b: 29 },
          matter: [
          { r: 36, g: 18, b: 42 }, // darkPRPL
          { r: 78, g: 36, b: 42 }, // rockDust
          { r: 252, g: 178, b: 96 }, // solorFlare
          { r: 253, g: 238, b: 152 } // totesASun
          ] };
        
        
        // Some Variables hanging out
        var particles = [],
        centerX = canvas.width / 2,
        centerY = canvas.height / 2,
        drawBg,
        
        // Draws the background for the canvas, because space
        drawBg = function (ctx, color) {
          ctx.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        };
        
        // Particle Constructor
        var Particle = function (x, y) {
          // X Coordinate
          this.x = x || Math.round(Math.random() * canvas.width);
          // Y Coordinate
          this.y = y || Math.round(Math.random() * canvas.height);
          // Radius of the space dust
          this.r = Math.ceil(Math.random() * config.maxParticleSize);
          // Color of the rock, given some randomness
          this.c = colorVariation(colorPalette.matter[Math.floor(Math.random() * colorPalette.matter.length)], true);
          // Speed of which the rock travels
          this.s = Math.pow(Math.ceil(Math.random() * config.maxSpeed), .7);
          // Direction the Rock flies
          this.d = Math.round(Math.random() * 360);
        };
        
        // Provides some nice color variation
        // Accepts an rgba object
        // returns a modified rgba object or a rgba string if true is passed .........完整代码请登录后点击上方下载按钮下载查看