简介
shapely-canvas 是一个轻量级的 JavaScript 库，它可以在 canvas 画布上绘制各种形状，如矩形、圆形、椭圆形、三角形、多边形等。它的特点是使用方便，支持链式调用，可以很容易地实现丰富多彩的图形效果。
安装
shapely-canvas 通过 npm 进行安装，先确保安装了 Node.js 和 npm，然后通过以下命令安装：
npm install shapely-canvas
快速上手
引入 shapely-canvas：
import Canvas from 'shapely-canvas'
创建画布并获取上下文：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')使用 shapely-canvas 绘制形状：
Canvas(rectOptions)
.fillStyle('#ff0000')
.strokeStyle('#0000ff')
.width(200)
.height(100)
.draw(ctx)支持的形状
shapely-canvas 支持以下形状：
- 矩形（Rectangle）
- 圆形（Circle）
- 椭圆形（Ellipse）
- 三角形（Triangle）
- 多边形（Polygon）
矩形
绘制矩形：
Canvas(rectOptions)
.fillStyle('#ff0000')
.strokeStyle('#0000ff')
.width(200)
.height(100)
.draw(ctx)选项：
width：矩形宽度，必填。height：矩形高度，必填。x：矩形左侧距离 x 轴的距离，默认为 0。y：矩形顶部距离 y 轴的距离，默认为 0。fillStyle：填充颜色，可选。strokeStyle：描边颜色，可选。lineWidth：描边宽度，可选，默认为 0。
圆形
绘制圆形：
Canvas(circleOptions)
.fillStyle('#ff0000')
.strokeStyle('#0000ff')
.radius(50)
.draw(ctx)选项：
x：圆心 x 坐标，必填。y：圆心 y 坐标，必填。radius：圆形半径，必填。fillStyle：填充颜色，可选。strokeStyle：描边颜色，可选。lineWidth：描边宽度，可选，默认为 0。
椭圆形
绘制椭圆形：
Canvas(ellipseOptions)
.fillStyle('#ff0000')
.strokeStyle('#0000ff')
.xRadius(50)
.yRadius(30)
.draw(ctx)选项：
x：椭圆形中心点 x 坐标，必填。y：椭圆形中心点 y 坐标，必填。xRadius：椭圆形 x 半径，必填。yRadius：椭圆形 y 半径，必填。rotation：旋转角度，可选，默认为 0。startAngle：起始角度，可选，默认为 0。endAngle：结束角度，可选，默认为 2 * Math.PI。fillStyle：填充颜色，可选。strokeStyle：描边颜色，可选。lineWidth：描边宽度，可选，默认为 0。
三角形
绘制三角形：
Canvas(triangleOptions)
.fillStyle('#ff0000')
.strokeStyle('#0000ff')
.point({ x: 50, y: 50 })
.point({ x: 150, y: 50 })
.point({ x: 100, y: 100 })
.draw(ctx)选项：
points：三角形三个顶点的坐标，必填。fillStyle：填充颜色，可选。strokeStyle：描边颜色，可选。lineWidth：描边宽度，可选，默认为 0。
多边形
绘制多边形：
-- -------------------- ---- ------- ---------------------- --------------------- ----------------------- -------- -- --- -- -- -- -------- -- ---- -- -- -- -------- -- ---- -- --- -- -------- -- --- -- --- -- -------- ----------
选项：
points：多边形每个顶点的坐标，必填。fillStyle：填充颜色，可选。strokeStyle：描边颜色，可选。lineWidth：描边宽度，可选，默认为 0。
总结
通过学习 shapely-canvas，我们可以轻松实现各种形状的绘制，同时支持填充和描边效果，可以实现复杂的图形效果。使用 shapely-canvas 可以提高前端开发效率，大大缩短开发时间，相信在以后的项目中也会有很大的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd081e8991b448e65c2