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 id="rendered-js" >
c = document.querySelector('#c');
c.width = 1920;
c.height = 1080;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

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);
    }
  }, 0);
};
rsz();

async function Draw() {
  if (!t) {
    oX = oY = oZ = Rl = Pt = Yw = 0;

    reflect = (a, n) => {
      let d1 = Math.hypot(...a) + .0001;
      let d2 = Math.hypot(...n) + .0001;
      a[0] /= d1;
      a[1] /= d1;
      a[2] /= d1;
      n[0] /= d2;
      n[1] /= d2;
      n[2] /= d2;
      let dot = -a[0] * n[0] + -a[1] * n[1] + -a[2] * n[2];
      let rx = -a[0] - 2 * n[0] * dot;
      let ry = -a[1] - 2 * n[1] * dot;
      let rz = -a[2] - 2 * n[2] * dot;
      return [-rx * d1, -ry * d1, -rz * d1];
    };

    spawnTunnel = (
    tx, ty, tz,
    rw, cl, sp = 1, rad = .5,
    theta1 = 0, theta2 = 0,
    theta1ModFreq = 0,
    theta1ModMag = 0,
    theta2ModFreq = 0,
    theta2ModMag = 0,
    theta1Offset = 0,
    theta2Offset = 0,
    radModFreq = 0,
    radModMag = 0,
    radModOffset = 0,
    showLine = false) =>
    {
      let X_ = X = tx;
      let Y_ = Y = ty;
      let Z_ = Z = tz;
      let ret = [];
      let p2a, p2, p2a1, ls;
      if (showLine) x.beginPath();
      for (let i = cl + 1; i--;) {
        let p1 = theta1 + C(Math.PI * 2 / cl * i * theta1ModFreq + theta1Offset) * theta1ModMag;
        let p2 = theta2 + C(Math.PI * 2 / cl * i * theta2ModFreq + theta2Offset) * theta2ModMag;
        let p2a1 = theta2 + C(Math.PI * 2 / cl * (i + 1) * theta2ModFreq + theta2Offset) * theta2ModMag;
        let lsa = rad + C(Math.PI * 2 / cl * i * radModFreq + radModOffset) * rad / 2 * radModMag;
        let lsb = rad + C(Math.PI * 2 / cl * (i + 1) * radModFreq + radModOffset) * rad / 2 * radModMag;
        if (i == cl) {
          p2a = p2;
          ls = lsa;
        } else if (i == 0) {
          p2a = p2a1;
          ls = lsb;
        } else {
          p2a = (p2 + p2a1) / 2;
          ls = (lsa + lsb) / 2;
        }
        let a = [];
        for (let j = rw + 1; j--;) {
          p = Math.PI * 2 / rw * j + Math.PI / rw;
          X = S(p) * ls;
          Y = 0;
          Z = C(p) * ls;
          R(-p2a + Math.PI / 2, 0, 0);
          R(0, 0, -p1);
          a = [...a, [X + X_, Y + Y_, Z + Z_]];
        }

        ret = [...ret, a];

        if (showLine) {
          X = X_;
          Y = Y_;
          Z = Z_;
          R(Rl, Pt, Yw, 1);
          if (Z > 0) x.lineTo(...Q());
        }

        vx = C(p1) * C(p2) * sp;
        vy = S(p2) * sp;
        vz = S(p1) * C(p2) * sp;
        X_ += vx;
        Y_ += vy;
        Z_ += vz;
      }
      if (showLine) stroke('#f00', '', 2, false);
      a = [];
      ret.map((v, i) => {
        if (i) {
          let s1 = ret[i];
          let s2 = ret[i - 1];
          for (let j = rw; j--;) {
            b = [];
            let l1_ = (j + 0) % rw;
            let l2_ = (j + 1) % rw;
            X = s1[l1_][0];
            Y = s1[l1_][1];
            Z = s1[l1_][2];
            b = [...b, [X, Y, Z]];
            X = s1[l2_][0];
            Y = s1[l2_][1];
            Z = s1[l2_][2];
            b = [...b, [X, Y, Z]];
            X = s2[l2_][0];
            Y = s2[l2_][1];
            Z = s2[l2_][2];
            b = [...b, [X, Y, Z]];
            X = s2[l1_][0];
            Y = s2[l1_][1];
            Z = s2[l1_][2];
            b = [...b, [X, Y, Z]];
            a = [...a, b];
          }
        }
      });
      return a;
    };

    HSVFromRGB = (R, G, B) => {
      let R_ = R / 256;
      let G_ = G / 256;
      let B_ = B / 256;
      let Cmin = Math.min(R_, G_, B_);
      let.........完整代码请登录后点击上方下载按钮下载查看