javascript - HTML5 Canvas 在圆圈中画线并随着音乐移动？

Question

我能够围绕圆画线。我已经实现了 AudioContext API 设置的基本实现。

我面临的问题是当调用lineTo时，该行只会增长但不会收缩。我受到这个启发https://www.kkhaydarov.com/audio-visualizer/ 。我正在将此代码翻译为 https://codesandbox.io/s/hungry-tereshkova-1pf0c?runonclick=1&file=/src/Visualizer.js:713-725这是 React.js 版本。

如果您运行该代码，您将看到音乐播放，然后条形图会增长一次，然后它们就会粘住。他们拒绝收缩然后随着节拍成长。

我不确定我哪里出了问题或者代码中缺少什么。它看起来与示例中的其他代码非常相似。

以下是 Visualizer 组件的完整代码。

import React, { useEffect, useRef } from "react";

let frequencyArray = [];
let analyser;

const Visualizer = () => {
  const canvasRef = useRef(null);
  const requestRef = useRef(null);

  useEffect(() => {
    initAudio();
    requestRef.current = requestAnimationFrame(drawCanvas);
    return () => cancelAnimationFrame(requestRef.current);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const initAudio = () => {
    const audio = new Audio();
    audio.src =
      "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1";
    audio.crossOrigin = "anonymous";
    audio.load();

    const context = new (window.AudioContext || window.webkitAudioContext)();
    analyser = context.createAnalyser();
    const source = context.createMediaElementSource(audio);

    source.connect(analyser);
    analyser.connect(context.destination);

    frequencyArray = new Uint8Array(analyser.frequencyBinCount);
    audio.play();
  };

  // draw the whole thing
  const drawCanvas = () => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");
      const radius = 200;
      const bars = 100;

      drawCircle(canvas, ctx, radius);

      analyser.getByteFrequencyData(frequencyArray);

      for (var i = 0; i < bars; i++) {
        const height = frequencyArray[i] * 0.3;

        drawLine(
          {
            i,
            bars,
            height,
            radius
          },
          canvas,
          ctx
        );
      }

      requestRef.current = requestAnimationFrame(drawCanvas);
    }
  };

  // draw the main circle
  const drawCircle = (canvas, ctx, radius) => {
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    ctx.save();
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.strokeStyle = "#dddddd";
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.restore();
  };

  // dray lines around the circle
  const drawLine = (opts, canvas, ctx) => {
    const { i, radius, bars, height } = opts;
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const lineWidth = 10;
    const rads = (Math.PI * 2) / bars;

    const x = centerX + Math.cos(rads * i) * (radius + lineWidth);
    const y = centerY + Math.sin(rads * i) * (radius + lineWidth);
    const endX = centerX + Math.cos(rads * i) * (radius + height);
    const endY = centerY + Math.sin(rads * i) * (radius + height);

    // draw the bar
    ctx.strokeStyle = "#ddd";
    ctx.lineWidth = lineWidth;
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(endX, endY);
    ctx.stroke();
  };

  return (
    <canvas
      ref={canvasRef}
      style={{ background: "#f5f5f5" }}
      width={window.innerWidth}
      height={window.innerHeight}
    />
  );
};

export default Visualizer;

Answer 1

您刚刚在代码中错过了一个clearRect...
如果没有它，我们看到线条的增长只是因为任何后续的较短线条不会覆盖前一条线条，它们仍然会被绘制，只是我们看不到它。

这是工作代码:

https://codesandbox.io/s/dry-cdn-ghu4m?file=/src/Visualizer.js:1247-1276

我硬编码了一个 ctx.clearRect(0,0, 1000,1000) 只是为了向您展示它的工作原理，但您应该在那里使用 Canvas 尺寸，其他一切看起来都不错。

唯一的建议是以某种方式移动:

const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");

drawCanvas 函数之外的全局位置，
这些不会在每次运行时改变，最好只设置一次。