canvas动画效果新年祝福话语

html代码

 <ul id="ul"></ul>

css代码

* {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      position: relative;
    }
    ul.slow li {
      transition: 2.4s all;
    }
    li {
      width: var(--rect-width);
      height: var(--rect-width);
      position: absolute;
      transition: 2s all;
      left: 0;
      top: 0;
      background: black;
      opacity: 0;
      transform: translate(500px, 100px);
    }

js代码

"use strict";
const rectwidth = parsefloat(document.documentelement.style.getpropertyvalue('--rect-width'));
const canvas = document.createelement('canvas');
canvas.width = 100;
canvas.height = 20;

const ctx = canvas.getcontext('2d');
ctx.font = '100 18px monospace';
ctx.textbaseline = 'top';
ctx.textalign = 'center';
const ul = document.getelementbyid('ul');

function drawtext(text) {
  ctx.clearrect(0, 0, canvas.width, canvas.height);
  const gradient = ctx.createlineargradient(10, 0, canvas.width - 10, 0);
  gradient.addcolorstop(0, 'red');
  gradient.addcolorstop(1 / 6, 'orange');
  gradient.addcolorstop(2 / 6, 'yellow');
  gradient.addcolorstop(3 / 6, 'green');
  gradient.addcolorstop(4 / 6, 'blue');
  gradient.addcolorstop(5 / 6, 'indigo');
  gradient.addcolorstop(1, 'violet');
  ctx.fillstyle = gradient;
  ctx.filltext(text, canvas.width / 2, 2);
  const imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
  let ili = 0;
  for (let column = 0; column < imagedata.width; column++) {
    for (let row = 0; row < imagedata.height; row++) {
      const idx = ((row * imagedata.width) + column) * 4;
      if (imagedata.data[idx + 3] > 0) {
        const li = ul.children[ili++];
        li.style.opacity = '1';
        li.style.transform = `translate(
          ${column * rectwidth}px,
          ${row * rectwidth}px)
          scale(1.5)`;
        li.style.background =
          `rgba(${imagedata.data[idx]},${imagedata.data[idx + 1]},${imagedata.data[idx + 2]},${imagedata.data[idx + 3] / 255})`;
      }
    }
  }
  while (ili < 2000) {
    const li = ul.children[ili++];
    li.style.opacity = '0';
  }
}

const timeout = t => new promise(resolve => settimeout(resolve, t));

void async function main() {
  const duration = 2500;
  {
    let i = 2000;
    const fragment = document.createdocumentfragment();
    while (i-- > 0) {
      fragment.appendchild(document.createelement('li'));
    }
    ul.appendchild(fragment);
  }

  await timeout(100);

  drawtext('新年愿望');
  await timeout(duration);

  drawtext('身体健康');
  await timeout(duration);

  drawtext('有很多钱');
  await timeout(duration);

  ul.classlist.add('slow');
  drawtext('新年快乐!');
}();

效果图