原生js实现爱心聚集飘散粒子动画效果-html代码-BFW代码库

原生js实现爱心聚集飘散粒子动画效果

代码语言：html

所属分类：表白

代码描述：原生js实现爱心聚集飘散粒子动画效果

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

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

<style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
}

body {
  position: relative;
  background: #000;
}
</style>

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

<script>
/*
* File Name / blowingHeart.js
* Created Date / Aug 24, 2020
* Aurhor / Toshiya Marukubo
* Twitter / https://twitter.com/toshiyamarukubo
*/

/*
     Common Tool.
   */

class Tool {
  // random number.
  static randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  // random color rgb.
  static randomColorRGB() {
    return (
      "rgb(" +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ", " +
      this.randomNumber(0, 255) +
      ")");

  }
  // random color hsl.
  static randomColorHSL(hue, saturation, lightness) {
    return (
      "hsl(" +
      hue +
      ", " +
      saturation +
      "%, " +
      lightness +
      "%)");

  }
  // gradient color.
  static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {
    const col = cr + "," + cg + "," + cb;
    const g = ctx.createRadialGradient(x, y, 0, x, y, r);
    g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")");
    g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")");
    g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")");
    return g;
  }}


/*
       When want to use Angle and radian.
     */

class Angle {
  constructor(a) {
    this.a = a;
    this.rad = this.a * Math.PI / 180;
  }

  incDec(num) {
    this.a += num;
    this.rad = this.a * Math.PI / 180;
  }}


/*
       variable for canvas.
     */

let canvas;
let offCanvas;

class Canvas {
  constructor(bool) {
    // create canvas.
    this.canvas = document.createElement("canvas");
    // if on screen.
    if (bool === true) {
      this.canvas.style.position = 'relative';
      this.canvas.style.display = 'block';
      this.canvas.style.top = 0;
      this.canvas.style.left = 0;
      document.getElementsByTagName("body")[0].appendChild(this.canvas);
    }
    this.ctx = this.canvas.getContext("2d");
    this.width = this.canvas.width = window.innerWidth;
    this.height = this.canvas.height = window.innerHeight;
    // size.
    this.width < 768 ? this.heartSize = 180 : this.heartSize = 250;
    // mouse infomation.
    this.mouseX = null;
    this.mouseY = null;
    // sprite array and quantity.
    this.hearts = [];
    this.offHeartNum = 1;
    this.offHearts = [];
    // offscreen data.
    this.data = null;
  }

  onInit() {
    let index = 0;
    for (let i = 0; i < this.height; i += 12) {
      for (let j = 0; j < this.width; j += 12) {
        let oI = (j + i * this.width) * 4 + 3;
        if (this.data[oI] > 0) {
          index++;
          const h = new Heart(canvas.ctx, j + Tool.randomNumber(-3, 3), i + Tool.randomNumber(-3, 3), Tool.randomNumber(6, 12),.........完整代码请登录后点击上方下载按钮下载查看