canvas彩色流体线条动画效果代码-html代码-BFW代码库

canvas彩色流体线条动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas彩色流体线条动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          color: #fff;
          background: #123;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
        }
        
        canvas {
          background: #000;
          width: 100vmin;
          height: 100vmin;
        }
    </style>



</head>

<body>
    <canvas></canvas>

    <script>
        console.clear();
        
        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");
        
        const actualDPR = () => Math.min(2, window.devicePixelRatio);
        
        
        let currentDPR = actualDPR();
        const dimensions = {
          get width() {
            return canvas.clientWidth * currentDPR;
          },
          get height() {
            return canvas.clientHeight * currentDPR;
          } };
        
        
        const field = {
          rows: 0,
          cols: 0,
          items: [] };
        
        
        const setupField = () => {
          const { random, PI } = Math;
          const newField = {
            rows: dimensions.width / 32 | 0,
            cols: dimensions.height / 32 | 0 };
        
          if (field.rows === newField.rows && field.cols === newField.cols) {
            return;
          }
          Object.assign(field, newField);
          const length = field.rows * field.cols;
          field.items = Array.from({ length }, (_, i) => {
            const x = i % field.cols;
            const y = i / field.cols | 0;
            return { dir: Math.sin(x * .1 + y * .2) * P.........完整代码请登录后点击上方下载按钮下载查看