前言
Canvas 是 HTML5 中新增的标签，是用来绘制图形动画的一个 API。除了自己手写 canvas，还可以使用现成的工具库，一般采用 npm 安装。
在本文中，我们将会介绍一个非常好用而且灵活的 npm 包 canvasutil，它可以帮助我们快速创建丰富的动态元素。
简介
canvasutil 是一个基于 canvas 的 npm 包，可以帮助开发者快速创建矩形、圆形、多边形等动态元素，并支持添加样式和交互事件等。
canvasutil 对于前端开发者无论是初学者还是高级开发者，都能够很好的应用在工作中。
安装
在终端输入以下指令进行安装：
--- ------- ---------- ------
使用
canvasutil 具有很多的配置，我们先看一下最简单的实例：
------ ---------- ---- ------------- -- -------- ------ -- ----- ------------- - ------------------------------------ ----- ---------- - --- -------------------------- -- ------ ------------------------- -- --- -- --- ------ ---- ------- ---- ---------- ----- --- -- ---- ------------------
上面的代码我们设置了一个指定的宽度和高度为 100 的红色矩形。
我们接下来详细介绍一下 CanvasUtil 的相关配置和方法，以便能更灵活的应用到开发中。
配置
CanvasUtil 提供了众多的配置项，我们可以使用它来设置矩形、圆形、多边形等元素。
配置项
addRectangle
- x: 矩形左上角 X 坐标
- y: 矩形左上角 Y 坐标
- width: 矩形宽度
- height: 矩形高度
- fillStyle: 矩形填充颜色
- strokeWidth: 矩形边框宽度
- strokeStyle: 矩形边框颜色
addCircle
- x: 圆形圆心 X 坐标
- y: 圆形圆心 Y 坐标
- radius: 圆形半径
- fillStyle: 圆形填充颜色
- strokeWidth: 圆形边框宽度
- strokeStyle: 圆形边框颜色
addPolygon
- points: 多边形的顶点数组
- fillStyle: 多边形填充颜色
- strokeWidth: 多边形边框宽度
- strokeStyle: 多边形边框颜色
方法
draw()
调用 draw() 方法可以将上述添加的所有元素进行显示，比如我们上面的例子中的代码：
------------------
clear()
CanvasUtil 对象上的 clear() 方法可以清除画布上的所有元素，一般在需要清除画布将之前绘制的图形时调用。
-------------------
深度
在 CanvasUtil 中，有很多复杂实用的能力，例如 Canvas 的交互事件等，只要你发挥你的想象力，Canvas 可以实现很多炫酷的效果。我们这里介绍 CanvasUtil 中较为复杂的扇形绘制方法。
addArcSector
扇形是一个常见的图形，CanvasUtil 提供 addArcSector 方法可以快速添加扇形。具体的配置参数如下：
- centerX：扇形中心点的 X 坐标
- centerY：扇形中心点的 Y 坐标
- radius：扇形半径
- startRadians：扇形的起始角度，以弧度表示，从 x 轴正向开始，逆时针方向
- endRadians：扇形的结束角度，以弧度表示，从 x 轴正向开始，逆时针方向
- fillColor：扇形填充颜色，默认透明
- strokeColor：扇形边框颜色，默认透明
- lineWidth：边框宽度，默认为 0
操作示例：
------------------------- -------- ---- -------- ---- ------- --- ------------- -- ----------- -------- ---------- ------ ------------ ------- ---------- - ---
学习和指导意义
本文所讲的主要绘图库可以帮助开发者快速创建出形状和图形再通过 Canvas 绘制在页面上，而且这些图形和形状一旦绘制完成可以添加各种事件，我们可以把 Canvas 绘图库的技术应用到游戏开发，动画效果展现，以及一些有趣的图形样式上。
Canvas 作为 HTML5 中的重要内容之一，有着不可小觑的作用，了解 Canvas 不仅可以拓宽我们的视野，为我们的开发带来灵感。而且还能给予我们更多的开发参考。学习 canvasutil 不仅可以让我们更好的掌握前端技术，还能让我们写出更酷炫的页面效果，让用户体验更优。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61574