介绍
rough.js 是一个 JavaScript 库，可以用于创建手绘风格的图形。它可以轻松地集成到你的前端项目中，并且具有灵活的配置选项。
本文将介绍如何使用 npm 包 rough.js 创建手绘风格的图形，并提供一些示例代码来帮助你入门。
安装
使用 npm 包管理器安装 rough.js：
npm install --save roughjs
示例
基础形状
首先，让我们看一下如何使用 rough.js 创建基本的手绘形状：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ------------
-------
------
------- ---------------------
------- --------------------------------------------------------------
--------
----- -- - ------------------------------------------------
----- --------- - ---------------- --- ---- -----
-------------------
---------
-------
-------上面的代码将在 canvas 元素中创建一个 100 x 100 的矩形。
配置选项
除了基本形状之外，你还可以使用各种配置选项来自定义你的图形。例如，你可以使用 fillStyle 属性设置填充颜色，strokeStyle 属性设置描边颜色，以及 strokeWidth 属性设置描边宽度。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ------------
-------
------
------- ---------------------
------- --------------------------------------------------------------
--------
----- -- - ------------------------------------------------
----- --------- - ---------------- --- ---- ---- -
---------- ------
------------ -------
------------ --
---
-------------------
---------
-------
-------上面的代码将在 canvas 元素中创建一个填充为红色、描边为蓝色、描边宽度为 2 的矩形。
动画效果
最后，让我们看一下如何使用 rough.js 创建动画效果。我们可以通过 requestAnimationFrame() 来创建平滑的动画效果。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ------------
-------
------
------- ---------------------
------- --------------------------------------------------------------
--------
----- -- - ------------------------------------------------
--- - - --
-------- ------ -
-----------
----- ---- - ---------- --- -- -----
--------------
- -- --
-- -- - ------------- -
- - --
-
----------------------------
-
-------
---------
-------
-------上面的代码将在 canvas 元素中创建一个平滑移动的垂直线条。
结论
使用 npm 包 rough.js 创建手绘风格的图形非常简单，并且具有灵活的配置选项和动画效果。希望本文可以帮助你入门，为你的前端项目增添一些独特的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32628
