原生js实现粒子点击爆炸动画效果代码-html代码-BFW代码库

原生js实现粒子点击爆炸动画效果代码

代码语言：html

所属分类：粒子

代码描述：原生js实现粒子点击爆炸动画效果代码

下面为部分代码预览，完整代码请点击下载或在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>
<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<h1></h1>
<!-- partial -->
  <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 r.........完整代码请登录后点击上方下载按钮下载查看