Drawbot是一个前端绘图库，它可以让用户在网页上进行基础图形的绘制，例如圆形、矩形、线条等等。该库只需要一个Canvas元素即可完成多样化的绘制效果，适用于初学者和有经验的开发人员。通过npm包管理器的支持，该库已经成为一个极受欢迎和普及的前端绘图工具。
安装
你可以在你的终端输入以下指令安装这个包。
npm install drawbot --save
如何使用
在开始之前，我们需要先创建一个canvas元素，然后从 Drawbot 中引入并初始化它。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------- - --- --------------- - ----- ---- ---
---------
-------
-------Drawbot 包具有丰富的功能，下面我们逐一展开。
绘制图形
Drawbot 支持绘制多种基本图形，例如圆形，矩形，直线和文本等等。
绘制矩形
在绘制矩形之前，我们需要设置矩形的样式，例如颜色和宽度。接下来，我们可以使用 drawRect() 函数绘制矩形。
drawbot.styles({
fillColor: 'lightblue',
strokeColor: 'black',
lineWidth: 2
});
drawbot.drawRect(20, 20, 100, 200);这将会在画布上绘制一个宽 100、高 200 的蓝色矩形，并且矩形还会有一条黑色边框。
绘制圆形
在绘制圆形之前，同样需要设置圆形的样式，例如颜色和宽度。我们可以使用 drawCircle() 函数绘制圆形。
drawbot.styles({
fillColor: 'lightblue',
strokeColor: 'black',
lineWidth: 2
});
drawbot.drawCircle(150, 150, 50);这将会在画布上绘制一个半径为 50 的蓝色圆形，同时圆形还会有一条黑色边框。
绘制线条
如果想要在画布上绘制线条，我们需要设置线条的样式和坐标范围。然后使用 drawLine() 函数绘制线条。
drawbot.styles({
strokeColor: 'red',
lineWidth: 3
});
drawbot.drawLine(100, 100, 200, 200);这将会在画布上绘制一条从 (100, 100) 到 (200, 200) 的红色线条，线条的宽度为 3。
绘制文本
如果想要在画布上添加文本，我们需要设置文本的样式、字体和位置。接下来，使用 drawText() 函数可以绘制文本。
drawbot.styles({
font: '20px Arial',
fillStyle: 'black',
textAlign: 'center'
});
drawbot.drawText('Hello world!', 150, 120);这将会在画布上绘制一行居中的黑色‘Hello world!’。
更改样式
Drawbot 允许用户自由更改绘制的样式，例如颜色、宽度和透明度。我们可以使用 styles() 函数来改变样式，该函数的参数是一个对象，包含所有要更改的属性。
drawbot.styles({
strokeColor: 'red',
lineWidth: 3,
globalAlpha: 0.5
});这将会将绘制的样式更改为红色边框宽 3 和 50% 的不透明度。
清空画布
如果需要重绘画布，我们可以使用 clear() 函数清除现有的所有图形和文本。
drawbot.clear();
这将会清除当前画布的所有内容。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------- - --- --------------- - ----- ---- ---
-- ----
----------------
---------- ------------
------------ --------
---------- -
---
-------------------- --- ---- -----
-- ----
----------------
---------- ------------
------------ --------
---------- -
---
----------------------- ---- ----
-- ----
----------------
------------ ------
---------- -
---
--------------------- ---- ---- -----
-- ----
----------------
----- ----- -------
---------- --------
---------- --------
---
----------------------- -------- ---- -----
---------
-------
-------总结
通过本文，你将学习到如何使用 Drawbot 包进行基础绘图，并学会怎样更改样式和清空画布。Drawbot 是前端绘图中一个非常有用的库，可以帮助我们绘制多种图形，从而实现优秀的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c6181e8991b448ebe0d