canvas纸片翻转loading加载动画效果代码-html代码-BFW代码库

canvas纸片翻转loading加载动画效果代码

代码语言：html

代码描述：canvas纸片翻转loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #22577A;
    overflow: hidden;
}

.canvas-example {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity 1s ease-out;
}

.canvas-example.-loaded {
    opacity: 1;
}

.canvas-example > canvas {
    border-radius: 50%;
    overflow: hidden;
}
</style>



</head>

<body >
  <div id='root' class='canvas-example'></div>


  
      <script >
class _ {
    static limit(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }

    static protectNumber(value, fallbackValue) {
        return typeof value === 'number' ? value : fallbackValue;
    }
}


class CanvasExample {
    static CSS_ROOT = 'canvas-example';
    static CSS_ROOT_LOADED_VARIANT = '-loaded';

    static DEFAULT_CLEAR_COLOR = '#000000';
    static DEFAULT_PAINT_COLOR = '#ff0000';
    static DEFAULT_FADE_COLOR  = 'rgba(0, 0, 0, 0.2)';
    static DEFAULT_DEBUG_MODE  = false;
    static DEFAULT_SIZE_MODIFIER = 0.5;

    #root;
    #canvas;
    #context;
    #frameRequestId;

    #sizeModifier;

    #clearColor;
    #paintColor;
    #fadeColor;

    #debugMode;
    #mouseX;
    #mouseY;

    #angle;
    #lastAngle;
    #lastX;
    #lastY;
    #lastCenterX;
    #lastCenterY;

    constructor(options) {
        this.#root = options.root;
        this.#root.classList.add(CanvasExample.CSS_ROOT);
        this.#canvas = document.createElement('canvas');
        this.#context = this.#canvas.getContext('2d');
        this.#root.appendChild(this.#canvas);

        this.#sizeModifier = options?.sizeModifier
            || CanvasExample.DEFAULT_SIZE_MODIFIER;
        this.#clearColor = options?.clearColor
            || CanvasExample.DEFAULT_CLEAR_COLOR;
        this.#paintColor = options?.paintColor
            || CanvasExample.DEFAULT_PAINT_COLOR;
        this.#fadeColor  = options?.fadeColor
            || CanvasExample.DEFAULT_FADE_COLOR;
        this.#debugMode = options?.debugMode
            || CanvasExample.DEFAULT_DEBUG_MODE;

        this.#angle = 0;
        this.#lastAngle = 0;

        this.#onWindowResize();
        this.#clear();
        this.#initEventListeners();
        this.#root.classList.add(CanvasExample.CSS_ROOT_LOADED_VARIANT);
    }

    #initEventListeners() {
        window.addEventListener('resize', this.#onWindowResize.bind(this));
        document.addEventListener('mousemove', this.#onMouseMove.bind(this));
    }

    #onWindowResize() {
        const size = this.#sizeModifier
        * Math.min(window.innerWidth, window.innerHeight);

        const scale = window.devicePixelRatio;

        this.#canvas.width = Math.floor(size * scale);
        this.#canvas.height = Math.floor(size * scale);
        this.#canvas.style.width = `${size}px`;
        this.#canvas.style.height = `.........完整代码请登录后点击上方下载按钮下载查看