整体的绘画界面大致如下：

[画板的线上地址](http://blog.codeape.site/interest/draw-shard) 该画板主要是用来给碎片化组件来进行绘画的，碎片化大致效果如下图。具体可以看 [上期文章](https://juejin.cn/post/7372013979467333643) 。

## Canvas 画板的实现码上掘金简单 Demo： [jcode](https://code.juejin.cn/pen/7372086637540409378) ### 创建 Canvas 实时绘画 `useRTDraw` 是一个以每秒60帧进行实时绘画的钩子，具体可以看 [往期文章](https://juejin.cn/post/7371311256630329370) 这里不过多赘述。绑定获取 `Canvas` 信息后，当调用 `startAnimation` ，就开始触发 `onDraw` 的回调了，大概每秒会触发60次，此时只需要调用 `drawAllPolygon` ，保持多边形的绘画即可。 ```js export default function Page() { // ... const {drawState, canvasRef, canvasInfo, setCanvasInfo, startAnimation} = useRTDraw({ onDraw() { drawState.ctx.clearRect(0, 0, canvasInfo.w * drawState.ratio, canvasInfo.h * drawState.ratio); drawAllPolygon() }, }) useEffect(() => { // 根据浏览器宽高，获取 canvas 宽高的，可看码上掘金就不细讲了 getCardInfo() setTimeout(() => { setDrawPolygonData(firstShard) startAnimation() }, 200); }, []) // ... return (