canvas实现霓虹花动画幻觉效果代码-html代码-BFW代码库

canvas实现霓虹花动画幻觉效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现霓虹花动画幻觉效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background-color: #000;
	color: #e3e4e8;
	display: flex;
	height: 100vh;
}
canvas {
	display: block;
	margin: auto;
	object-fit: contain;
	max-width: 100vw;
	max-height: 100vh;
}
</style>


</head>

<body >
  <canvas width="750" height="750" style="width: 600px; height: 600px;"></canvas>

      <script >
document.addEventListener("DOMContentLoaded", app);

function app() {
  let C = document.querySelector("canvas"),
  c = C.getContext("2d"),
  W = 600,
  H = 600,
  centerX = W / 2,
  centerY = H / 2,
  S = window.devicePixelRatio;
  // properly scale the canvas based on pixel ratio
  C.width = W * S;
  C.height = H * S;

  if (S > 1) {
    C.style.width = `${W}px`;
    C.style.height = `${H}px`;
    c.scale(S, S);
  }

  let frame = 0,
  frames = 360,
  speed = 1.5,
  hue = 0,
  baseRingRadius = 64,
  baseRingsInGroup = 6,
  ringGroups = 8,
  ringGroupRadiusOffset = 14,
  ringGroupRotOffset = 30,
  degToRad = deg => {
    return deg * Math.PI / 180;
  },
  draw = () => {
    c.clearRect(0, 0, W, H);

    for (let g = 1; g <= ringGroups; ++g) {
      // determine the radius of the ring group
.........完整代码请登录后点击上方下载按钮下载查看