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,
    pointers: [
    {
      pos: [
      canvasSize[0] / 2,
      canvasSize[1] / 2 + 128],

      vel: [640, 8],
      color: '#00ff00',
      n: 15 },

    {
      pos: [
      canvasSize[0] / 2,
      canvasSize[1] / 2 + 128],

      vel: [640, 8],
      color: '#ffff00',
      n: 13 },

    {
      pos: [
      canvasSize[0] / 2,
      canvasSize[1] / 2 + 128],

      vel: [640, 8],
      color: '#ff7f00',
      n: 11 }] };



  retu.........完整代码请登录后点击上方下载按钮下载查看