canvas实现字母字符三维漂浮旋转动画效果代码-html代码-BFW代码库

canvas实现字母字符三维漂浮旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现字母字符三维漂浮旋转动画效果代码

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

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

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          overflow: hidden;
          background-color: #000;
        }
        
        canvas {
          width: 100%;
          height: 100vh;
        }
    </style>





</head>

<body>
    <canvas></canvas>


    <script>
        window.onload = () => {
          const CANVAS = document.getElementsByTagName("canvas")[0];
          const CTX = CANVAS.getContext("2d");
          const CHARS = [];
          const MAX_CHARS = 200;
          const SEPARATION = 1;
        
          let ww, wh, camera;
        
          class Vector {
            constructor(x, y, z) {
              this.x = x;
              this.y = y;
              this.z = z;
            }
        
            rotate(dir, ang) {
              const X = this.x;
              const Y = this.y;
              const Z = this.z;
        
              const SIN = Math.sin(ang);
              const COS = Math.cos(ang);
        
              if (dir === "x") {
                this.y = Y * COS - Z * SIN;
                this.z = Y * SIN + Z * COS;
              } else if (dir === "y") {
                this.x = X * COS - Z * SIN;
                this.z = X * SIN + Z * COS;
              }
            }
        
            project() {
              const ZP = this.z + camera.z;
              const DIV = ZP / wh;
              const XP = (this.x + camera.x) / DIV;
              const YP = (this.y + camera.y) / DIV;
              const CENTER = getCenter();
              return [XP + CENTER[0], YP + CENTER[1], ZP];
            }}
        
        
          class Char {
            constructor(letter, pos) {
              this.letter = letter;
              this.pos = pos;
            }
        
            rotate(dir, ang) {
              this.pos.rotate(dir, ang);
            }
        
            render() {
              const PIXEL = this.pos.project();
              const XP = PIXEL[0];
              const YP = PIXEL[1];
              const MAX_SIZE = 50;
              const SIZE = 1 / PIXEL[2] * MAX_SIZE | 0;
              const BRIGHTNESS = SIZE / MAX_SIZE;
              const COL = `rgba(255, 255, ${100 * BRIGHTNESS | 0 + 150}, ${BRIGHTNESS})`;
        
  .........完整代码请登录后点击上方下载按钮下载查看