点阵走位动画特效

代码语言:html

所属分类:粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  body {
	background-color: #00FFFF;
	margin: 0px;
	overflow: hidden;
}
</style>

<body translate="no">
<canvas id="c"></canvas>

<script>
      "use strict";

let a = document.getElementById("c"),
b = a.getContext("2d"),
c,
d,
e = [400, 200],
g = [400, 100],
h = [200, 150],
k = 0,
l = true;

onWindowResize();

function draw() {
  b.fillStyle = "rgba(0,255,255,0.2)";
  b.fillRect(0, 0, c, d);
  b.fillStyle = "black";
  for (let x = 0; x < c; x += 30)
  for (let y = k; y < d; y += 30) {
    b.beginPath();
    let radMod = 14;
    for (let i = 0; i < e.length; i++) {
      const f = Math.pow(x + 15 - e[i], 2) + Math.pow(y + 15 - g[i], 2),
      p = h[i] * h[i];
      if (f < p) {
        const rm = f / p * 14;
        if (rm < radMod) radMod = rm;
      }
    }
    b.arc(x + 15, y + 15, l ? 15 - radMod : 1 + radMod, 0, 2 * Ma.........完整代码请登录后点击上方下载按钮下载查看

网友评论0