粒子开花canvas模拟动画效果-html代码-BFW代码库

粒子开花canvas模拟动画效果

代码语言：html

所属分类：粒子

代码描述：粒子开花canvas模拟动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #333;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>

</head>
<body translate="no">

<script>
/**
  Pop Particles 
  Just playing around with some function expression
  and declarations to make a particle display. 
  
  Are JS classes bad, does this work just as well?
  Tried to not use 'this' and breakdown functions.
  
  click to add new pop's into the mix
*/

let surface;
let animation;
let points = [];
let frame = 0;

const setViewport = element => {
  const canvasElement = element;
  const dc = document.documentElement;
  const width = ~~(dc.clientWidth, window.innerWidth || 0);
  const height = ~~(dc.clientHeight, window.innerHeight || 0);
  canvasElement.width = width;
  canvasElement.height = height;
};

const createCanvas = name => {
  const canvasElement = document.createElement("canvas");
  canvasElement.id = name;
  setViewport(canvasElement);
  document.body.appendChild(canvasElement);
  surface = canvasElement.getContext("2d");
  surface.scale(1, 1);
  return canvasElement;
};

const resetCanvas = () => {
  setViewport(canvas);
};

const canvas = createCanvas("canvas");
window.addEventListener("resize", resetCanvas);

const getRandomPoint = radius => {
  const angle = Math.random() * Math.PI * 2;
  return {
    x: Math.cos(angle) * radius,
    y: Math.sin(angle) * radius,
    angle };

};

const compare = (a, b) => {
  if (a.angle < b.angle) return -1;
  if (a.angle > b.angle) return 1;
  return 0;
};

const createPop = config => {
  const radius = config.size.end;
  const baseAmount = 15;
  const amt = ~~(Math.random() * baseAmount) + 45;
  const pointArray = [];
  for (let i = 0; i < amt; i++) {
    const rndPoint = getRandomPoint(radius);
    const arcPoint = {
      x: config.x + rndPoint.x,
      y: config.y + rndPoint.y,
      angle: rndPoint.angle };

    pointArray.push(arcPoint);
  }
  pointArray.sort(compare).forEach(point => {
    const ofs = 0.1; //Math.random() * 0.08 + 0.1;
    const pointx = {
      x: point.x,
      y: point.y,
      vx: (point.x - config.x) * ofs + config.vx,
      vy: (point.y - config.y) * ofs + config.vy,
      siz.........完整代码请登录后点击上方下载按钮下载查看