如何在 React.js 中绘制画布？

在本文中，我们将学习如何在 ReactJs 中添加绘图画布。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要添加我们的画布，我们将使用 react-canvas-paint 包。 react-canvas-paint 包帮助我们将绘图画布集成到我们的应用程序中。所以首先，我们将安装 react-canvas-paint 包，然后我们将在我们的主页上添加一个画布。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-canvas-paint 包：

npm i react-canvas-paint

项目结构：它看起来像这样。

添加绘图画布：安装包后，我们可以轻松地在应用程序的任何页面上添加画布。对于这个例子，我们将添加一个画布到我们的主页。

在App.js文件中添加以下内容：

Javascript

import React from "react";
import ReactCanvasPaint from 'react-canvas-paint'
import 'react-canvas-paint/dist/index.css'
  
export default function DrawingCanvasGfg(){
  return (
    
      ReactJs Drawing Canvas - GeeksforGeeks
      
    
  );
};

说明：在上面的例子中，我们首先导入 ReactCanvasPaint 组件，然后在新函数中使用已安装的组件来添加我们的绘图画布。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

如何在 React.js 中绘制画布？

Javascript

ReactJs Drawing Canvas - GeeksforGeeks

输出：