canvas实现彩色转子旋转加载动画效果代码-html代码-BFW代码库

canvas实现彩色转子旋转加载动画效果代码

代码语言：html

代码描述：canvas实现彩色转子旋转加载动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        body {
      padding:0;
      margin:0;
      background: #111;
      overflow: hidden;
    }
    
    canvas {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }
    </style>

</head>

<body>

    <script>
        var M = Math,
    PI = M.PI,
    TWOPI = PI * 2,
    HALFPI = PI / 2,
    canvas = document.createElement( 'canvas'),
    ctx = canvas.getContext( '2d' ),
    width = canvas.width = 350,
    height = canvas.height = 350,
    cx = width / 2,
    cy = height / 2,
    count = 40,
    sizeBase = 0.1,
    sizeDiv = 5,
    tick = 0;

ctx.translate( cx, cy );

(function loop() {
  requestAnimationFrame( loop );  
  ctx.clearRect( -width / 2, -height / 2, width, height );
  ctx.fillStyle = '#fff';  
  var angle = tick / 8,
      radius = -50 + M.sin( tick.........完整代码请登录后点击上方下载按钮下载查看