在前端开发中，很多时候需要绘制一些图形或者展示一些弹窗等。这时候，我们可以使用 @tangential/drawer 这个 npm 包来帮助我们快速绘制出我们所需的图形。
安装
首先，我们需要使用 npm 来安装这个包。在命令行中输入以下命令：
npm install @tangential/drawer
使用
引入包：
import TangentialDrawer from '@tangential/drawer';
创建画布
我们需要先创建一个画布，才能在上面绘画。创建画布需要传入一个 DOM 节点。
const canvas = document.querySelector('#canvas');
const drawer = new TangentialDrawer(canvas);绘制图形
线
绘制一条线：
drawer.drawLine({
from: { x: 50, y: 50 },
to: { x: 200, y: 200 },
strokeStyle: 'red',
lineWidth: 2,
});矩形
绘制一个矩形：
drawer.drawRect({
x: 50,
y: 50,
width: 100,
height: 100,
fillStyle: 'green',
lineWidth: 2,
});圆
绘制一个圆：
drawer.drawCircle({
x: 150,
y: 150,
r: 50,
fillStyle: 'blue',
lineWidth: 2,
});弧线
绘制一条弧线：
-- -------------------- ---- ------- ---------------- -- ---- -- ---- -- --- ----------- -- --------- ------- - -- ---------- --------- ---------- -- ---
文本
绘制一行文本：
drawer.drawText({
text: 'Hello, world',
x: 50,
y: 50,
fillStyle: 'black',
font: '20px sans-serif',
});清除画布
清除画布上的所有图形：
drawer.clear();
意义
@tangential/drawer 这个包可以帮助我们更快速、更简单地绘制出我们所需的图形。使用起来也很方便，代码简洁。我们可以在项目中使用这个包来为用户呈现更好的交互效果，提高用户的体验感受。
示例代码
下面是一个完整的示例：
-- -------------------- ---- ------- ------ ---------------- ---- --------------------- ----- ------ - ---------------------------------- ----- ------ - --- ------------------------- ----------------- ----- - -- --- -- -- -- --- - -- ---- -- --- -- ------------ ------ ---------- -- --- ----------------- -- --- -- --- ------ ---- ------- ---- ---------- -------- ---------- -- --- ------------------- -- ---- -- ---- -- --- ---------- ------- ---------- -- --- ---------------- -- ---- -- ---- -- --- ----------- -- --------- ------- - -- ---------- --------- ---------- -- --- ----------------- ----- ------- ------- -- --- -- --- ---------- -------- ----- ----- ------------ --- ---------------
你可以将这段代码复制到你的项目中并运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581d81e8991b448d5470