canvas线条交错旋转动画效果代码-html代码-BFW代码库

canvas线条交错旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas线条交错旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
</head>

<body translate="no">
  
  
      <script >
////////////////////////////////////////////////////////////////////////////////
console.clear();

let canvas, canvasCtx;
let canvasSize = [0, 0],scale = 1;
let state;

requestAnimationFrame(main);

////////////////////////////////////////////////////////////////////////////////
function main() {
  canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  document.body.style.margin = '0';
  canvas.style.display = 'block';

  canvasCtx = canvas.getContext('2d');

  checkResizeAndInit();
  state = createState();

  requestAnimationFrame(mainLoop);

  function mainLoop() {
    tick();
    requestAnimationFrame(mainLoop);
  }
}

function createState() {
  const state = {
    time: 0,
    timeDelta: 1 / 60,
    pointer: {
      pos: [
      canvasSize[0] / 2,
      canvasSize[1] / 2 + 128],

      vel: [640, 8] } };


  return state;
}

function tick() {
  checkResizeAndInit();
  canvasCtx.fillStyle = `rgba(0, 0, 0, ${1 / 32})`;
  canvasCtx.fillRect(0, 0, canvasSize[0], canvasSize[1]);

  doIt();

  state.time +=.........完整代码请登录后点击上方下载按钮下载查看