canvas-2d 是一个在 Node.js 和浏览器中使用的 2D 绘图库，它使用 Canvas API 实现。它支持多种绘制类型，如线条、图形、图像等，并且性能优异，易于学习和使用。在这篇文章中，我们将介绍如何使用 canvas-2d，包括安装、配置和基本绘图操作。
安装
使用 npm 安装 canvas-2d：
npm install canvas-2d --save
配置
在 Node.js 中使用 canvas-2d，需要安装 Canvas 包。可以使用以下命令安装：
npm install canvas --save
在浏览器中使用 canvas-2d，只需要在 HTML 文件中导入 canvas-2d 库：
<script src="https://unpkg.com/canvas-2d"></script>
基本绘图操作
创建画布
使用 createCanvas 函数创建一个画布，可以指定宽度和高度。例如，创建一个宽度为 500 像素、高度为 500 像素的画布：
const { createCanvas } = require('canvas-2d');
const canvas = createCanvas(500, 500);绘制直线
使用 drawLine 函数绘制一条直线。指定起始点和终点的坐标，以及线条的颜色和宽度。例如，绘制一条从坐标 (0, 0) 到 (300, 300) 的红色直线，线条宽度为 5：
canvas.drawLine(0, 0, 300, 300, 'red', 5);
绘制矩形
使用 drawRect 函数绘制一个矩形。指定左上角的坐标、宽度和高度，以及填充颜色和线条颜色。例如，绘制一个在坐标 (100, 100) 处，宽度为 200 像素，高度为 100 像素，填充色为蓝色，线条颜色为红色的矩形：
canvas.drawRect(100, 100, 200, 100, 'blue', 'red');
绘制圆形
使用 drawCircle 函数绘制一个圆形。指定圆心的坐标、半径、填充颜色和线条颜色。例如，绘制一个在坐标 (250, 250) 处，半径为 50 像素，填充色为绿色，线条颜色为黄色的圆形：
canvas.drawCircle(250, 250, 50, 'green', 'yellow');
绘制图像
使用 drawImage 函数绘制一张图像。指定图像对象、左上角的坐标、宽度和高度。例如，绘制一张宽度为 100 像素、高度为 100 像素的图片，在坐标 (200, 200) 处显示：
const { loadImage } = require('canvas-2d');
loadImage('example.png').then(image => {
canvas.drawImage(image, 200, 200, 100, 100);
});示例代码
最终代码如下：
-- -------------------- ---- ------- ----- - ------------- --------- - - --------------------- ----- ------ - ----------------- ----- ------------------ -- ---- ---- ------ --- -------------------- ---- ---- ---- ------- ------- ---------------------- ---- --- -------- ---------- ----------------------------------- -- - ----------------------- ---- ---- ---- ----- ---
总结
canvas-2d 是一个简单易用的 2D 绘图库，在 Node.js 和浏览器中都可以使用。在本文中，我们介绍了如何安装、配置和基本绘图操作。希望这篇文章对你有帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c93ccdc64669dde5b0c