canvas正方形放大动画效果代码-html代码-BFW代码库

canvas正方形放大动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas正方形放大动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body,html{
  background: #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
#c{
  background:#000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

  
  
</head>

<body >
  <canvas id=c>
  
      <script>
c = document.querySelector('#c');
x = c.getContext('2d');
S = Math.sin;
C = Math.cos;
Rn = Math.random;
t = go = 0;
rsz = window.onresize = () => {
  setTimeout(() => {
    if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
      c.style.height = '100vh';
      setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
    } else {
      c.style.width = '100vw';
      setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
    }
    c.width = 1920;
    c.height = c.width / 1.777777778;
  }, 0);
};
rsz();

Draw = () => {
  if (!t) {
    go = false;
    R = (Rl, Pt, Yw, m) => {X = S(p = (A = (M = Math).atan2)(X, Y) + Rl) * (d = (H = M.hypot)(X, Y)), Y = C(p) * d, Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z)), Z = C(p) * d, X = S(p = A(X, Z) + Yw) * (d = H(X, Z)), Z = C(p) * d;if (m) X += oX, Y += oY, Z += oZ;};
    Q = () => [c.width / 2 + X / Z * 900, c.height / 2 + Y / Z * 900];
    for (CB = [], j = 6; j--;) for (i = 4; i--;) CB = [...CB, [(a = [S(p = Math.PI * 2 / 4 * i + Math.PI / 4), C(p), 2 ** .5 / 2]).........完整代码请登录后点击上方下载按钮下载查看