介绍
utilise.tdraw 是一个基于 HTML5 Canvas 2D API 的前端绘图工具库，它提供了简洁易用的 API 接口，可以用来实现各种图形绘制，包括但不限于：
- 线段、折线、曲线
- 矩形、正方形、圆角矩形
- 圆、椭圆、扇形
- 文字、图像等
该库的代码托管在 GitHub，可以通过 npm 安装和使用。
安装
在终端中执行以下命令安装 utilise.tdraw：
--- ------- -------------
使用
在 HTML 中添加一个 canvas 元素，在 JavaScript 中引入 utilise.tdraw，接着就可以通过 utilise.tdraw 的 API 来绘制图形了。
以下是一个简单的例子：
--------- -----
------
------
----- ----------------
-------------------- ----------
-------
------
------- ---------------------
------- --------------------------------------------------------------
--------
----- ------ - ---------------------------------
----- --- - -----------------------
-- ------
--------------- --- --- --- ---
-- ------
--------------- ---- --- --- ---
-- ------
---------------- ------ ---- ----- ---- ----- -----
---------
-------
-------在上面的例子中，我们使用 tdraw 的 line、rect 和 curve 方法分别绘制了一条线段、一个矩形和一条曲线。
API
以下是 utilise.tdraw 的 API 列表，其中 ctx 包含了 canvas 的 2D 上下文对象，style 是一个 CSS 样式对象，用于设置图形的样式。
线段
--------------- --- --- --- --- ------
绘制一条线段，参数 x1、y1 和 x2、y2 分别指定了线段的起点和终点的坐标，style 可选，用于设置线段的样式。
折线
------------------- ------- ------
绘制一条折线，参数 points 是一个二维数组，每个元素都表示一个点的坐标，style 可选，用于设置折线的样式。
曲线
---------------- ------- ------
绘制一条曲线，参数 points 是一个二维数组，每个元素都表示一个控制点的坐标，style 可选，用于设置曲线的样式。
矩形
--------------- -- -- ------ ------- ------
绘制一个矩形，参数 x、y 指定了矩形左上角的坐标，width、height 指定了矩形的宽和高，style 可选，用于设置矩形的样式。
正方形
----------------- -- -- ----- ------
绘制一个正方形，参数 x、y 指定了正方形左上角的坐标，size 指定了正方形的边长，style 可选，用于设置正方形的样式。
圆弧
-------------- -- -- ------- ----------- --------- -------------- ------
绘制一个圆弧，参数 x、y 指定了圆心的坐标，radius 指定了圆弧的半径，startAngle、endAngle 分别指定了圆弧的起始角度和终止角度（单位为弧度），anticlockwise 是一个布尔值，表示绘制圆弧的方向，style 可选，用于设置圆弧的样式。
圆
----------------- -- -- ------- ------
绘制一个圆，参数 x、y 指定了圆心的坐标，radius 指定了圆的半径，style 可选，用于设置圆的样式。
椭圆
------------------ -- -- --- --- ------
绘制一个椭圆，参数 x、y 指定了椭圆的中心点的坐标，r1、r2 分别指定了椭圆在水平方向和垂直方向上的半径，style 可选，用于设置椭圆的样式。
扇形
----------------- -- -- ------- ----------- --------- -------------- ------
绘制一个扇形，参数 x、y 指定了圆心的坐标，radius 指定了扇形的半径，startAngle、endAngle 分别指定了扇形的起始角度和终止角度（单位为弧度），anticlockwise 是一个布尔值，表示绘制扇形的方向，style 可选，用于设置扇形的样式。
文字
--------------- ----- -- -- ------
绘制一段文字，参数 text 是要绘制的文本内容，x、y 指定了文字的左下角的坐标，style 可选，用于设置文字的样式。
注意：utilise.tdraw 目前没有提供设置文字字体和字号的方法，需要自行使用 Canvas API 中的 font 属性来设置。
图像
---------------- ---- -- -- ------ -------
绘制一张图像，参数 src 是图像的 URL，x、y 指定了图像的左上角的坐标，width、height 指定了图像的宽和高。
注意：utilise.tdraw 绘制图像时默认不进行缩放和裁剪，需要自行处理好图像的大小和位置。
示例
以下是一个综合使用 utilise.tdraw 的示例：
--------- -----
------
------
----- ----------------
-------------------- ----------
-------
------
------- ---------------------
------- --------------------------------------------------------------
--------
----- ------ - ---------------------------------
----- --- - -----------------------
-- ------
--------------- --- --- --- --- -
---------- --
------------ ------
--
-- ------
--------------- ---- --- --- --- -
---------- --
------------ -------
---------- -------
------------ ---
--
-- -----
----------------- ---- --- --- -
---------- --
------------ -------
---------- -------
------------ -------
----------- --
--
-- ------
----- --- - --- -------
------- - -------------------------------
---------- - -- -- -
---------------- -------- --- ---- ---- ----
-
-- ------
--------------- ------- ---------------- ---- ---- -
---------- -------
---------- --------
--
-- ------
----------------- ---- ---- --- ---------- ------------ ------ -
---------- --
------------ -------
---------- ------
--
---------
-------
-------结语
utilise.tdraw 是一个非常实用的前端绘图工具库，使用简单、易学、易用。通过本文的学习，相信你已经入门 utilise.tdraw，可以使用它来绘制出更丰富多彩的图形了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f40dfc0dbf7be33b2567286