简介
special-draw 是一个用于生成特殊图形的 npm 包，可以用于前端开发中制作动画、特效等等。
安装
使用 npm 可以安装最新版本的 special-draw，只需要在终端输入以下代码即可：
npm install special-draw
使用方法
导入 special-draw 并创建一个实例：
import SpecialDraw from 'special-draw'; const special = new SpecialDraw();
接着，调用 special 实例上的方法来绘制不同的图形：
绘制星形
-- -------------------- ---- ------- -------------- ------- ---- -- -- ------- -- -- -- ------ ---------- -- -- ---------- -- -- --- ------- -- -- ---- -- ---- -- --- - -- -- --- -- --- - -- ---
绘制圆形
special.circle({
radius: 100, // 半径
color: '#E91E63', // 颜色
lineWidth: 2, // 线宽度
x: 150, // 中心点 x 坐标
y: 150 // 中心点 y 坐标
});绘制菱形
-- -------------------- ---- ------- ----------------- ------ ---- -- -- ------- ---- -- -- ------ ---------- -- -- ---------- -- -- --- ------- -- -- ---- -- ---- -- --- - -- -- --- -- --- - -- ---
绘制三角形
special.triangle({
radius: 100, // 半径
color: '#9C27B0', // 颜色
lineWidth: 2, // 线宽度
rotate: 0, // 旋转角度
x: 150, // 中心点 x 坐标
y: 150 // 中心点 y 坐标
});绘制正方形
special.square({
size: 200, // 边长
color: '#4CAF50', // 颜色
lineWidth: 2, // 线宽度
rotate: 0, // 旋转角度
x: 150, // 中心点 x 坐标
y: 150 // 中心点 y 坐标
});指导意义
special-draw 包虽然看起来很简单，但是它深刻地揭示了前端开发中常常用到的 canvas 的使用方式，以及动画等相关技术。因此，使用 special-draw 不仅可以提高前端开发的效率，还可以加深我们对 canvas 等技术的理解。
示例代码
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ------- - --- -------------- -------------- ------- ---- ------- -- ------ ---------- ---------- -- ------- -- -- ---- -- --- --- ---------------- ------- ---- ------ ---------- ---------- -- -- ---- -- --- --- ----------------- ------ ---- ------- ---- ------ ---------- ---------- -- ------- -- -- ---- -- --- --- ------------------ ------- ---- ------ ---------- ---------- -- ------- -- -- ---- -- --- --- ---------------- ----- ---- ------ ---------- ---------- -- ------- -- -- ---- -- --- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670898ccae46eb111ef52