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