声波动画效果-html代码-BFW代码库

声波动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Sharp and Smooth Donkey</title>
<style>
  body {
/*   background-color: black; */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

canvas {
  width: 100vw;
  height: 200px;
  
}
</style>

</head>
<body translate="no">
<div>
<canvas width="400" height="200"></canvas>
</div>

<script>
      async function main() {
  const image = await loadImage();
  const dpi = window.devicePixelRatio;
  const canvas = document.querySelector('canvas');
  const w = window.innerWidth * dpi;
  const h = Math.floor(image.height * dpi * 1.5);
  canvas.width = w;
  canvas.height = h;
  canvas.style.height = Math.floor(window.innerWidth * (h / w)) + 'px';
  const ctx = canvas.getContext('2d');
  const color = '#f5f7e2';
  const bgColor = '#074c64';
  document.body.style.backgroundColor = bgColor;


  ctx.clearRect(0, 0, w, h);
  ctx.drawImage(image, 0, 0, image.width * dpi, image.height * dpi);
  const shape = analyseShape(ctx, 0, 0, image.width * dpi, image.height * dpi);

  let tt = 0;
  const halfHeight = h * 0.5;
  const halfWidth = w * 0.5;
  function draw() {
    ctx.clearRect(0, 0, w, h);
    tt++;
    const off = h / 2;
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(0, off);
    // const shift = Math.random() * 3 + Math.sin(tt/6)*2;
    const lineLength = 1 * dpi;
    const noiseScale = 80 * dpi;
    const noiseAmount = Math.max((Math.sin(tt * .02) - 0.3) * noiseScale * 0.5 + noiseScale * 0.5, 0) + 3 * dpi;
    let tw = 0;
    for (let m = 0; m < w; m += lineLength + Math.random() * 1 * dpi) {
      tw = tw === 1 ? 0 : 1;
      let i = m + Math.sin(tt * .4);
      // const ss = 6;
      // const hs = 6;
      // const shift = Math.sin(tt*.7) * ss *.5;
      const verticalNoise = (Math.random() - 0.5) * noiseAmount;

      if (Math.abs(i - halfWidth) > shape.length / 2)
      ctx.lineTo(i, halfHeight + verticalNoise);else
      {
        const ii = Math.floor(i - halfWidth + shape.length / 2);
        if (shape[ii]) {

          const shapeAttenuation = (verticalNoise + noiseAmount * 0.5) / noiseAmount * 0.5;
          const shapeAmount = shape[ii][tw] * (1 - noiseAmount / 150);
          const x = verticalNoise + shapeAmount;
          ctx.lineTo(i, x + halfHeight);
        }
      }

      // const j = Math.floor(i - shift);
      // if (j < 0) continue;
      // ctx.moveTo(i*ss, off);
      // ctx.lineTo(i*ss + shift, shape[i][i%2]*hs + off +  Math.random()*10);

    }
    ctx.stroke();
    requestAnimationFrame(draw);
  }
  draw();
}

function analyseShape(ctx, x, y, w, h) {
  const id = ctx.getImageData(x, y, w, h);
  const d = id.data;
  const arr = [];
  const hh = Math.floor(h / 2);

  for (let x = 0; x < w; x++) {
    let a = undefined;
    let b = undefined;
    for (let y = 0; y < h; y++) {
      let y2 = h - 1 - y;
      const p = getPixel(x, y);
      if (p[0] .........完整代码请登录后点击上方下载按钮下载查看