在前端开发中，我们经常需要在页面上展示文本，而有时候纯粹的 html 标签并不能满足我们的需求，此时使用 @etpinard/gl-text 可以轻松实现文本的各种效果展示。
安装
使用 npm 安装 @etpinard/gl-text：
npm install @etpinard/gl-text --save
使用
在项目中引入 @etpinard/gl-text：
import GLText from '@etpinard/gl-text';
然后就可以通过 new GLText() 来创建文本对象了。
-- -------------------- ---- ------- ----- ---- - --- -------- ----- ------ -------- ----- ----- ---- ------------ ------ ---------- ------ --------- -------- --------- ------------ ---- ------------- ---- ---------------- ------- ---
参数说明
text：要渲染的文本内容。font：字体样式。color：字体颜色。align：水平对齐方式。justify：垂直对齐方式。canvasWidth: canvas 的宽度。canvasHeight: canvas 的高度。backgroundColor: canvas 的背景颜色。
例子
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ----------
-------
---- -
------- --
----------------- -----
-
------ -
-------- ------
------- - -----
------ ------
------- ------
-
--------
-------
------
-----------------
------- -------------------------
-------
--------- -------------------- ---- ------- ------ ------ ---- -------------------- ----- ------ - --------------------------------- ----- ---- - --- -------- ----- ------ -------- ----- ----- ---- ------------ ------ ---------- ------ --------- -------- --------- ------------ ---- ------------- ---- ---------------- ------- --- -------- --------- - ------------------------------- ------------ - ----------
这段代码会在 canvas 中展示一个居中的“Hello World!”文本。
更多效果
@etpinard/gl-text 支持多种效果。
文本阴影
-- -------------------- ---- ------- ----- ---- - --- -------- ----- ------ -------- ----- ----- ---- ------------ ------ ---------- ------ --------- -------- --------- ------------ ---- ------------- ---- ---------------- ------- ------------ ------- ----------- --- -------------- -- -------------- -- ---
文本描边
-- -------------------- ---- ------- ----- ---- - --- -------- ----- ------ -------- ----- ----- ---- ------------ ------ ---------- ------ --------- -------- --------- ------------ ---- ------------- ---- ---------------- ------- ------------ ------- ------------ -- ---
文本渐变
-- -------------------- ---- -------
----- ---- - --- --------
----- ------ --------
----- ----- ---- ------------
------ ---------
-------- ---------
------------ ----
------------- ----
---------------- -------
--------- -
----- ---------
------ --- ---
---- --- -----
------- --
------- --
------ ------
-- -
------- ----
------ ------
-- -
------- --
------ ------
---
--
---文本旋转、扭曲
-- -------------------- ---- ------- ----- ---- - --- -------- ----- ------ -------- ----- ----- ---- ------------ ------ ---------- ------ --------- -------- --------- ------------ ---- ------------- ---- ---------------- ------- --------- ---- ------ --- ------ ---- ---
文本动画
-- -------------------- ---- -------
----- ---- - --- --------
----- ------ --------
----- ----- ---- ------------
------ ----------
------ ---------
-------- ---------
------------ ----
------------- ----
---------------- -------
---------- -
----- -------
---------- ---
---------- --
------ ----
--
---更多效果
@etpinard/gl-text 支持更多的效果，具体可以查看官方文档。
结语
@etpinard/gl-text 是一个功能强大且易用的 npm 包，它可以轻松实现文本的多种效果展示。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f90238a385564ab6f6f