canvas蓝色网格背景闪烁动画效果代码-html代码-BFW代码库

canvas蓝色网格背景闪烁动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas蓝色网格背景闪烁动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to right, #2f80ed, #56ccf2);
          height: 100vh;
        }
        
        #pixels {
          width: 340px;
          height: 340px;
          border-radius: 12px;
          background: #39419c;
          border: 2px solid #39419c;
        }
        
        .wrapper {
          width: 340px;
          height: 340px;
          position: relative;
        }
        
        .wrapper:before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 0);
          width: 220px;
          height: 50px;
          box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
        }
    </style>



</head>

<body>
    <div class="wrapper">
        <canvas id="pixels" width="340" height="340"></canvas>
    </div>

    <script>
        const cellSize = 12;
        const canvasWidth = 340;
        const canvasHeight = 340;
        
        /** Create an array to represnt grid */
        const makeGrid = (canvasWidth, canvasHeight, cellWidth, cellHeight) => {
          const cellsX = Math.ceil(canvasWidth / cellWidth); // cells per row
          const cellsY = Math.ceil(canvasHeight / cellHeight); // rows
          const fadeDirection = ["in", "out"];
          const colours = [
          "#407CEE",
          "#386BE8",
          "#315DC9",
          "#354EB0",
          "#39419C",
          "#292F70",
          "#242A62"];
        
        
          let grid = [];
        
          for (let i = 0; i < cellsY; i++) {
            grid = [...grid, []]; // create new row
        
            for (let j = 0; j < cellsX; j++) {
              const cell = {
                xPos: j * cellWidth,
                yPos: i * cellHeight,
                width: cellWidth,
                height: cellHeight,
                speed: Math.random() * 0.02,
                opacity: Math.random(),
                fadeDirection:
                fadeDirection[Math.floor(Math.random() * fadeDirection.length)],
                background: colours[Math.floor(Math.random() * colours.length)] };
        
        
              grid[i] = [...grid[i], cell];
            }
          }
        
          return grid;
        };
        
        const addLighting = (ctx,.........完整代码请登录后点击上方下载按钮下载查看