在 React 中使用 canvas html5 的清晰方法，而无需始终渲染所有画布形状

如何解决在 React 中使用 canvas html5 的清晰方法，而无需始终渲染所有画布形状

目前，我使用 React 堆栈在 Saas 平台上进行 ETL 项目。 我试图找到在 React 中使用画布的干净方式 并在调用 React Render 函数时渲染 Canvas 的一些形状 无需每次都创建一个新画布

我的想法是让一个组件像这样与 JSX 反应：

    <MyReactCanvas>
      <MyShape1 positionX= "10",positionY="10">
      <MyShape2>
      <MyGroupShape>
        <MyShape3>
      </MyGroupShape>
    <MyReactCanvas>

我的目标是拥有这样的东西： ETL Exemple

如果你有一些关于如何在 React 中使用画布的建议、文章、代码或信息

解决方法

如果我正确理解您的问题，您就可以在 React 项目中使用 HTML5 <canvas /> 标签和行为（如果您使用的是 React-Dom）。如果你有在纯 HTML 中使用 HTML5 Canvas 的经验，它应该与在 React 中使用它非常相似，你可以将它放在你的 JSX 中。

例如：

import React from "react";

export default function App() {
  React.useEffect(() => {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
  },[]);

  return (
    <div>
      <h1>HTML5 Canvas + React.js</h1>
      <canvas
        id="myCanvas"
        width="200"
        height="100"
        style={{ border: "1px solid #d3d3d3" }}
      >
        Your browser does not support the HTML canvas tag.
      </canvas>
    </div>
  );
}

此示例创建一个 <canvas /> 元素并在呈现 <App /> 组件时绘制一条线。请参阅此 stackblitz 以获取现场示例。

最近的一篇文章 "Canvas with React.js" 将是一个很好的起点。