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