使用 canvas html5 和 React 的清晰方法，无需一直渲染所有 canvas 形状

Question

目前，我在使用 React 堆栈的 SaaS 平台上进行 ETL 项目。我试图找到在 React 中使用 canvas 的简洁方法并在调用 React Render 函数时渲染 Canvas 的一些形状无需每次都创建新的 canvas

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

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

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

如果您有一些关于如何使用 canvas 和 React

的建议、文章、代码或信息

Answer 1

如果我正确理解你的问题，你可以在你的 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" 将是一个很好的起点。

使用 canvas html5 和 React 的清晰方法，无需一直渲染所有 canvas 形状

Clear way to use canvas html5 with React without render all canvas shapes all time

javascript

reactjs

html5-canvas

etl

saas