javascript - 复制带有动画的画布

Question

我有一个带有画布动画的简单 React 应用程序。

let inc = 0;
function App() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;

    const el = canvas.cloneNode(true);
    document.body.append(el);
    const context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect(10, 10, 10, 10);

    const draw = () => {
      context.clearRect(0, 0, 300, 300);
      context.fillRect(inc++, inc++, 10, 10);
      if (inc > 300) {
        inc = 0;
      }
      requestAnimationFrame(draw);
    };
    draw();
  }, []);
  return (
    <div className="App">
      <canvas
        ref={canvasRef}
        width={300}
        height={300}
        style={{ border: "1px solid red" }}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

我尝试canvasRef使用此代码进行复制。

const canvas = canvasRef.current;

const el = canvas.cloneNode(true);
document.body.append(el);

它被复制但不包括动画。

如何复制带有动画的元素？

我想要的是

我想复制canvasRef它的动画，然后加载它document.body.append()

标签： javascriptreactjs