js canvas彩虹星星闪耀动画效果代码-html代码-BFW代码库

js canvas彩虹星星闪耀动画效果代码

代码语言：html

所属分类：动画

代码描述：js canvas彩虹星星闪耀动画效果代码

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

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

<style>
    body {
  background: #13142b;
}

canvas {
  opacity: .6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

</style>

</head>
<body>

<canvas id="rainbow"></canvas>

<script>
    // VARS
const DPR = window.devicePixelRatio;
const colors = [
['#EC008C', '#f957b6'],
['#EF4136', '#ff7972'],
['yellow', '#fff'],
['lime', '#7aff7a'],
['#27AAE1', '#5ec8f2'],
["#662D91", '#a158d8']];

const tau = Math.PI * 2;
const start = Math.PI; // Start position
const finish = .5; // Finish (in % of circle "tau" basically ending at Math.PI * 2)
const inc = .007;
const rainbowHeight = .5; // of view height
const arcStagger = .05; // in %
const sparklesInPerStripe = 3;

let sparkles = [];

// UTILS
const clamp = (min, max, val) => {
  return Math.min(Math.max(min, val), max);
};
const boolRandom = () => {
  return Math.round(Math.random()) ? false : true;
};

// CANVAS
const sizeCanvas = () => {
  radius = clamp(15, 50, window.innerWidth / 60 / DPR);
  const canvas = document.getElementById('rainbow');
  canvas.width = window.innerWidth * DPR;
  canvas.height = window.innerHeight * DPR;
};

// SPARKLE PROPS
const addRandom = function (lineWidth) {
  return (boolRandom() ? -1 : 1) * Math.random() * lineWidth;
};
const makeSparkle = ({ cx, cy, radiusX, radiusY, endAngle, lineWidth, color }) => {
  return {
    x: cx + radiusX * Math.cos(endAngle) + addRandom(lineWidth), // stay out in front
    y: cy + radiusY * Math.sin(endAngle) + addRandom(lineWidth),
    opacity: 1,
    color,
    rad: Math.max(radius * Math.random() * DPR, 15) };

};

// ANIMATE
function animate(percent = 0) {
  const doneAnimatingIn = percent >= finish + arcStagger * colors.length; // animating in rainbow arcs

  let width = window.innerWidth * DPR;
  let height = window.innerHeight * DPR;

  const lineWidth = height * .5 / colors.length;

  const cx = width / 2;
  const startCy = height + lineWidth * rainbowHeight + (height - colors.length * lineWidth) / 3; // Possibly simplify this... but the math is good :) 

  const startRadiusX = width / 2 + colors.length * lineWidth * 2;
  const startRadiusY = height;

  let ctx = document.getElementById('rainbow').getContext('2d');
  ctx.clearRect(0, 0, width, height);
  ctx.globalAlpha = 1;
 .........完整代码请登录后点击上方下载按钮下载查看