在日常前端开发过程中，我们需要完成不少绘制和渲染等工作，而相应的图形库和可视化工具也层出不穷。今天我们将要介绍的是 scrawl，它是一个基于 Canvas API 和逐帧渲染的绘图库。在这个使用教程中，你会学到：
- scrawl 的基本使用方法
- 如何创建和组合各种绘图元素
- scrawl 的逐帧动画渲染方式
- 如何自定义 scrawl 的绘图元素
总之，scrawl 在可视化处理和动画制作方面十分强大，希望这个教程能对你有所启发。
安装
安装步骤非常简单，在命令行中输入以下命令：
npm install @scrawl/canvas --save
然后你就可以在你的项目中使用它了。
import * as scrawl from '@scrawl/canvas'
scrawl.init({
element: '#canvas-id',
width: 500,
height: 500,
})在示例代码中，我们通过调用 init 方法初始化了一个 Scrawl 画布，指定了宽度和高度，并且将其绑定在一个 ID 为 canvas-id 的元素上。
创建形状
首先，我们可以通过 scrawl.shapes 命名空间中的方法来创建各种形状，例如创建一个圆形：
const circle = scrawl.makeShape('circle', {
name: 'my-shape',
radius: 100,
fillStyle: 'red'
})这个圆形可以选择添加到 Scrawl 画布中：
circle.set({
startX: 'center',
startY: 'center',
}).stamp()这里我们通过 set 方法将圆形的位置定位在画布中心，然后使用 stamp 方法将它渲染到画布上。
在 Scrawl 中，我们还可以组合和修改各种形状，例如创建一个矩形并将其添加到画布中：
-- -------------------- ---- -------
----- ------ - ----------------------------- -
----- ----------
------ -------- -------
----------- -------- --------
---------- ---
------------ -------
---------- --------------
------- -----------
--
--------
----- ------------
------- ---------- ---------
--
--------在这个示例代码中，我们首先创建了一个矩形，并指定其位置、大小、线宽和边框样式等属性。注意这里我们还设置了 method 属性，这将影响其绘制方式，默认值为 fill。然后我们使用 clone 方法创建了一个新的矩形，并将其句柄定位在了矩形中心。最后，我们调用 stamp 方法将这两个矩形渲染到画布上。
动画渲染
创建好绘图元素后，我们可以开始实现动画效果。在 Scrawl 中，我们使用 scrawl.action 命名空间中的方法来控制逐帧动画，例如：
scrawl.action('my-animation', function (rate) {
myRect.handlePosition.rotateBy(1, 1);
}).run();在这个代码中，我们首先定义了一个名为 my-animation 的动画效果，在这个动画中，我们通过 rotateBy 方法旋转了矩形的句柄。然后我们使用 run 方法开始动画渲染。
自定义绘图元素
在 Scrawl 中，你还可以自定义绘图元素。例如，我们可以创建一个自定义的带箭头的直线：
-- -------------------- ---- -------
-------------------
----- ----------------
------ ---------- ----------
---- ---------- ----------
---------- ---
------------ ------
------------ ---
-------------- ---
------------ -----
----- -------- ------------- -
----- - ------ --- - - ------------
----- ----- - ------------------ -------
----- -------- - ------------------------
----- -------- ------- - --------------------------------------------- -------- - ------------------
----- ------------ ----------- - -------------------------------------------- - -------- --------------------
-------------- - -
-------- -------- --------- -------- ------- -------
--
-- ------------------ -
---------------------------- ----------- -------------
---------------------------- ------- ---------
---------------------------- ----------- --------------
-
--
--在这个示例代码中，我们通过 scrawl.makeCustom 方法创建了一个名为 my-arrow-line 的自定义绘图元素，并指定了箭头偏移量和箭头头部大小等属性。然后我们重写了 path 方法，这个方法负责自定义绘图元素的绘制路径。注意这里我们使用了 pathArray 属性来表示路径数组。
然后我们就可以将自定义绘图元素添加到 Scrawl 画布中：
const arrowLine = scrawl.makeShape('my-arrow-line', {
name: 'my-arrow-line-1',
start: [100, 100],
end: [400, 400],
}).stamp();在这个示例中，我们使用自定义绘图元素创建了一条带箭头的直线，并指定了其起点和终点坐标。然后我们通过 stamp 方法将其渲染到 Scrawl 画布上。
总结
在本篇文章中，我们介绍了如何使用 npm 包 scrawl 来进行基于 Canvas API 和逐帧渲染的绘图和动画处理。通过示例代码，你可以了解到 scrawl 的基本使用方法和动画渲染方式，以及如何自定义绘图元素。希望这个教程对你有所启发，欢迎在评论区分享你的经验和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc75b5cbfe1ea06127b3