clippers 是一个基于 Canvas 的库，它可以将图片裁剪成你需要的形状，包括矩形，三角形，圆形等等。本文将详细介绍如何使用 clippers 库。
安装
使用 npm 包管理器安装 clippers。
npm install clippers
开始使用
首先，我们需要在 HTML 中引入 clippers 库的文件。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
------- ----------------------------------------------------------------------
-------
------
------- ---------------------
--------
--- ------ - ----------------------------------
--- --- - ------------------------
--- ----- - --- --------
------------ - -----------
--- ---- - -------------------- --------------- ---------------- -----------------
-----------
---------------
-----------
-------------------- -- -- ------------- ---------------
--------------
-
--------- - --------------------------------
---------
-------
-------此时你可以看到一个圆形的图片已经被裁剪出来了。
API
clippers 库提供了以下裁剪形状的 API：
rect(ctx, x, y, w, h)矩形roundRect(ctx, x, y, w, h, r)圆角矩形triangle(ctx, x1, y1, x2, y2, x3, y3)三角形circle(ctx, x, y, r)圆形ellipse(ctx, x, y, rx, ry)椭圆形
以上每个 API 都接受 Canvas 2D Context 和对应的形状参数，返回对应的 clipper。
所有返回的 clipper 对象都有以下的方法：
addPath()将当前形状添加到 Canvas 的路径中excludePath()将当前形状从 Canvas 的路径中排除addClip()剪裁当前形状
这样，你可以自由使用这些 API 来裁剪你要的形状了。
示例代码
更多的示例代码请参考 clippers 文档，这里仅提供一小部分简单且实用的代码。
圆形头像
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- ----------------------------------------------------------------------
-------
------
------- ---------------------
--------
--- ------ - ----------------------------------
--- --- - ------------------------
--- ----- - --- --------
------------ - -----------
--- ---- - -------------------- --------------- ---------------- -----------------
-----------
---------------
-----------
-------------------- -- -- ------------- ---------------
--------------
-
--------- - --------------------------------
---------
-------
-------圆角矩形头像
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- ----------------------------------------------------------------------
-------
------
------- ---------------------
--------
--- ------ - ----------------------------------
--- --- - ------------------------
--- ----- - --- --------
------------ - -----------
--- ---- - ----------------------- -- -- ------------- -------------- ----------------
-----------
---------------
-----------
-------------------- -- -- ------------- ---------------
--------------
-
--------- - --------------------------------
---------
-------
-------总结
使用 clippers 库可以将图片裁剪成你需要的形状，非常实用。本文介绍了如何使用 clippers 库以及一些简单而实用的示例代码。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738f81e8991b448e9816