canvas网格动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const cellSize = 12;
const canvasWidth = 340;
const canvasHeight = 340;
const colors = [
  "#407CEE",
  "#386BE8",
  "#315DC9",
  "#354EB0",
  "#39419C",
  "#292F70",
  "#242A62"
];

/** Create an array to represnt grid */
const makeGrid = (
  canvasWidth,
  canvasHeight,
  cellWidth,
  cellHeight,
  palette
) => {
  const cellsX = Math.ceil(canvasWidth / cellWidth); // cells per row
  const cellsY = Math.ceil(canvasHeight / cellHeight); // rows
  const fadeDirection = ["in", "out"];

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: palette[Math.floor(Math.random() * palette.length)]
      };

grid[i] = [...grid[i], cell];
    }
  }

return grid;
};

const addLighting = (ctx, x, y, radius) => {
  ctx.save();

ctx.globalCompositeOperation = "lighter";
  const radialGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);

radialGradient.addColorStop(0.0, "#2A3178");
  radialGradient.addColorStop(1, "#000000");

ctx.fillStyle = radialGradient;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.restore();
};

const render = (canvas, grid) => {
  const ctx = canvas.getContext("2d");

// Setup cell styles
  ctx.strokeStyle = "#0E151F";
  ctx.lineWidth = 0.5;

const renderGrid = () => {
    // Reset cell
    ctx.fillStyle = "#292F70";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

grid.forEach((row, rowIndex) => {
      row.forEach((cell, cellIndex) => {
        ctx.fillStyle = cell.background;

if (cell.fadeDirection === "in") {
          if (cell.opacity + cell.speed <= 1) {
            ctx.globalAlpha = cell.opacity + cell.speed;
            cell.opacity = cell.opacity + cell.speed;
          } else {
            ctx.globalAlpha = cell.opacity - cell.speed;
            cell.opacity = cell.opacity - cell.speed;
            cell.fadeDirection = "out";
          }
        } else {
          if (cell.opacity - cell.speed >= 0) {
            ctx.globalAlpha = cell.opacity - cell.speed;
            cell.opacity = cell.opacity - cell.speed;
          } else {
            ctx.globalAlpha = cell.opacity + cell.speed;
            cell.opacity = cell.opacity + cell.speed;
            cell.fadeDirection = "in";
          }
        }

ctx.fillRect(cell.xPos, cell.yPos, cell.width, cell.height);
        ctx.strokeRect(cell.xPos, cell.yPos, cell.width, cell.height);

ctx.globalAlpha = 1;
      });
    });

addLighting(ctx, canvasWidth / 2, canvasHeight / 2, 200);
    requestAnimationFrame(renderGrid);
  };

return renderGrid;
};

const renderPalette = (palette) => {
  const el = document.getElementById("palette");

palette.forEach((color) => {
    const swatch = document.createElement("div");
    swatch.classList.add("swatch");
    swatch.style = `background: ${color};`;

el.appendChild(swatch);
  });
};

const renderGrid = render(
  document.getElementById("pixels"),
  makeGrid(canvasWidth, canvasHeight, cellSize, cellSize, colors)
);

renderGrid();

renderPalette(colors);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg