前言
在前端开发过程中，经常需要使用 Canvas 进行绘图，但是直接使用 Canvas API 会比较麻烦，需要编写大量的代码。而 @craigmorton/react-canvas 这个 npm 包可以很方便地在 React 应用中使用 Canvas。
安装
首先，需要在项目中安装 @craigmorton/react-canvas：
npm install @craigmorton/react-canvas
使用
在组件中使用
在需要使用 Canvas 的组件中，引入 @craigmorton/react-canvas：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- ----------------------------
----- -------- - -- -- -
----- --------- - ------------ ------- ------- -- -- -
----------------- - ------
------------------- -- ------------- ---------------
---
------ -
------- --------------- --
--
--
------ ------- ---------在组件中使用 Canvas 时，需要使用 useCanvas 钩子获取 Canvas 和 Canvas 上下文对象。useCanvas 钩子接受一个回调函数，这个回调函数会在 Canvas 渲染时被调用。在回调函数中，可以使用 Canvas API 来绘制图形。
上面代码中，我们通过 useRef 创建了一个 canvasRef，并将其作为 ref 传递给 Canvas 组件。useCanvas 钩子返回的 canvasRef 会在渲染时自动更新，从而更新我们绘制的图形。
在多个组件中使用
如果需要在多个组件中使用 Canvas，可以通过将 useCanvas 钩子的回调函数提取到一个单独的函数中来实现代码重用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------------------------
----- ------------ - -- ------- ------- -- -- -
----------------- - ------
------------------- -- ------------- ---------------
--
----- -------- - -- -- -
------ -
------- --------------------- --
--
--
------ ------- ---------上面代码中，我们将 useCanvas 钩子的回调函数提取到了一个名为 renderCanvas 的函数中，并将其作为参数传递给 Canvas 组件。这样，我们就可以在多个组件中重复使用 renderCanvas 函数。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- ----------------------------
----- ------------ - -- ------- ------- -- -- -
----------------- - ------
------------------- -- ------------- ---------------
--------------------
----------------- ---
---------------------------- ---------------
-----------------
--------------------
------------------------ - -- ------------- - -- ------------ - -- -- - - ---------
-----------------
--
----- -------- - -- -- -
----- --------- - ------------------------
------ -
------- --------------- --
--
--
------ ------- ---------上面代码中，我们使用 Canvas 和 useCanvas 组件配合绘制了一个红色矩形和一个圆形。你可以根据自己的需要修改 renderCanvas 函数来绘制其他图形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc281e8991b448da601