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

canvas多个图形旋转动画效果代码

代码语言：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.stro.........完整代码请登录后点击上方下载按钮下载查看