时间戳

首页 > 解决方案 > 在 React 中使用 canvas html5 的清晰方法，无需始终渲染所有画布形状

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

问题描述

目前，我在使用 React 堆栈的 Saas 平台上从事 ETL 项目。我尝试找到一种干净的方式来使用带有 React 的画布，并在调用 React Render 函数时渲染一些 Canvas 的形状，而无需每次都创建新的画布

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

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

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

如果你有一些建议、文章、代码或信息如何使用画布和 React

标签： javascriptreactjshtml5-canvasetlsaas

解决方案

如果我正确理解了您的问题，您就可以<canvas />在您的 React 项目中使用 HTML5 标签和行为（如果您使用的是 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”将是一个很好的起点。

推荐阅读