canvas多个图形旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas多个图形旋转动画效果代码，点击鼠标可切换图形。

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

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

<head>

    <meta charset="UTF-8">


    <style>
        body {
          height: 100vh;
          overflow: hidden;
          background: plum;
        }
        
        #canvas {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }
    </style>




</head>

<bod>
  
    <canvas id="canvas"></canvas>

    <script>
        const { min, max, PI: π } = Math;
        const query = document.querySelector.bind(document);
        
        const clamp = (minValue, maxValue, desired) => {
          return min(max(desired, minValue), maxValue);
        };
        
        const canvas = query('#canvas');
        const ctx = canvas.getContext('2d');
        
        const settings = {
          get width() {
            return clamp(400, 1800, window.innerWidth);
          },
          get height() {
            return clamp(300, 1200, window.innerHeight);
          },
          bg: 'plum',
          fg: 'aquamarine',
          mode: 5 };
        
        
        const resize = () => {
          const { width, height } = settings;
          canvas.width = width;
          canvas.height = height;
        };
        
        const drawBackground = () => {
          const { width, height, bg } = settings;
          ctx.fillStyle = bg;
          ctx.fillRect(0, 0, width, height);
        };
        
        const drawArc = (radius, startAngle = π * .75, endAngle = π * 2.25) => {
          const { fg } = settings;
          const x = 0;
          const y = 0;
          ctx.lineCap = 'round';
          ctx.beginPath();
          ctx.strokeStyle = fg;
          ctx.arc(x, y, radius, startAngle, endAngle);
          ctx.stroke();
          ctx.closePath();
        };
        
        const rotateAroundCenter = (angle, shiftX, shiftY, cb) => {
          const { width, height } = settings;
          const center = {
            x: width / 2,
            y: height / 2 };
        
          ctx.translate(center.x + shiftX, center.y + shiftY);
          ctx.rotate(angle);
          cb();
          ctx.translate(-(center.x + shiftX), -(center.y + shiftY));
        };
        
        const createBouncingAnimation = () => {
          let direction = 1;
          return (forward, backward) => {
            if (direction === 1) {
              if (forward()) {
                direction = -1;
              }
            } else if (backward()) {
              direction = 1;
            }
          };
        };
        
        const modes = [
        {
          angle: -320,
          angleMin: -320,
          angleMax: 320,
          bounce: createBouncingAnimation(),
          fn() {
            const { width, height } = settings;
            let angle = this.angle * Math.PI / 180;
            let radius = width / 500;
            const amount = 60;
            for (let i = 0; i < amount; i++) {
              let shiftX = radius * 21;
              let shiftY = radius * .3;
              rotateAroundCenter(angle, shiftX, shiftY, () => {
                const lineWidth = radius / 25;
                ctx.lineWidth = lineWidth;
                drawArc(radius);
              });
              radius = radius * 1.1;
            }
            this.bounce(() => {
              this.angle += .02;
              return this.angleMax - this.angle < .1;
            }, () => {
              this.angle -= .02;
              return this.angle - this.angleMin < .1;
            });
          } },
        
        
        {
          startAngle: π * .01,
          startAngleMin: π * .01,
          startAngleMax: π * .5,
          endAngle: π * 2,
          endAngleMin: π * .9,
          endAngleMax: π * 2,
          bounce: createBouncingAnimation(),
          fn() {
            const { width, height } = settings;
            let angle = 45 * Math.PI / 180;
            let radius = width / 500;
            const amount = 60;
            for (let i = 0; i < amount; i++) {
              let shiftX = radius;
              let shiftY = radius * .3;
              rotateAroundCenter(angle, shiftX, shiftY, () => {
                const lineWidth = radius / 25;
                ctx.lineWidth = lineWidth;
                drawArc(radius, this.startAngle, this.endAngle);
              });
              radius = radius * 1.1;
            }
            this.bounce(() => {
              this.startAngle += .002;
              this.endAngle -= .002;
              return this.startAngleMax - this.startAngle < .1;
            }, () => {
              this.startAngle -= .002;
              this.endAngle += .002;
              return this.startAngle - this.startAngleMin < .1;
            });
          } },
        
        
        {
          shiftX: -40,
          shiftXMin: -40,
          shiftXMax: 40,
          bounce: createBouncingAnimation(),
          fn() {
            const { width, height } = settings;
            let angle = 45 * Math.PI / 180;
            let radius = width / 500;
            const amount = 60;
            for (let i = 0; i < amount; i++) {
              let shiftX = radius * this.shiftX;
              let shiftY = radius * .3;
              rotateAroundCenter(angle, shiftX, shiftY, () => {
                const lineWidth = radius / 25;
                ctx.lineWidth = lineWidth;
                drawArc(radius);
              });
              radius = radius * 1.1;
            }
            this.bounce(() => {
              this.shiftX += .03;
              return .........完整代码请登录后点击上方下载按钮下载查看