什么是 canvas-sketch-cli?
canvas-sketch-cli 是一款基于 Node.js 的命令行工具，它可以让你通过使用 JavaScript 和 Canvas API 来创建艺术、生成图片、动画和交互式体验，你可以在你的电脑上离线使用它，也可以将你的作品在线发布到网络。
安装 canvas-sketch-cli
使用 npm 安装 canvas-sketch-cli
npm install -g canvas-sketch-cli
安装成功之后，你可以在命令行输入 canvas-sketch --help 来查看相关命令和使用方法。
使用 canvas-sketch-cli 创建你的第一个作品
现在，我们一起来创建一个简单的作品，先在你电脑上创建一个空的文件夹并进入该文件夹，在命令行输入以下命令：
canvas-sketch my-sketch.js --new --open
这个命令将为你创建一个名为 my-sketch.js 的文件，并用默认的编辑器打开它，此时，你可以看到这个文件中已经有了一些默认代码。
-- -------------------- ---- -------
----- ------------ - -------------------------
----- -------- - -
----------- - ---- --- -
--
----- ------ - -- -- -
------ -- -------- ------ ------ -- -- -
----------------- - --------
------------------- -- ------ --------
--
--
-------------------- ----------我们现在解释一下代码的作用：
const canvasSketch = require('canvas-sketch');
引入了 canvas-sketch 包，该包提供了许多可用的函数和属性。
const settings = { dimensions: [ 512, 512 ] };
定义了默认画面的尺寸为 512px * 512px，这个属性是可以进行自定义设置的。
const sketch = () => {
return ({ context, width, height }) => {
context.fillStyle = 'white';
context.fillRect(0, 0, width, height);
};
};这段代码是我们自己定义的一个函数，可以接收一个对象，该对象包含了 Canvas 的 2D 上下文和画布的尺寸。在该函数中，我们将画布的背景设置为白色。
canvasSketch(sketch, settings);
这段代码是用来启动整个程序，将我们自定义的函数和配置传入，最后生成我们的画布。
完成上述步骤后，你可以使用以下命令启动你的作品：
canvas-sketch my-sketch.js --open
现在，你会看到一个白色的画布，这就是我们刚刚写的代码所生成的画布。
使用 canvas-sketch-cli 绘制形状
我们在上一节中创建了一个白色的画布，这一节我们将绘制一些简单的形状，比如矩形、圆、斜线等等。
-- -------------------- ---- -------
----- ------------ - -------------------------
----- -------- - -
----------- -----
------ -----
-------------- ---
--
----- ------ - -- -- -
------ -- -------- ------ ------ -- -- -
----------------- - --------
------------------- -- ------ --------
--------------------
----------------- ---
----------------- ---
----------------- ---
----------------- ---
--------------------
----------------- - --------- ---- ------
---------------
--------------------
-------------- -- -- -- ------- - -- -------
--------------------
----------------- - --
------------------- - -------- ---- ------
-----------------
--------------------
--------------- -- -- -- ------- - -- -------
--------------------
----------------- - --------- ---- ------
---------------
--
--
-------------------- ----------让我们逐一解释一下代码的作用。
const settings = { dimensions: 'a4', units: 'cm', pixelsPerInch: 300 };这里我们定义了页面尺寸为 A4 纸大小，单位为 cm，像素密度为 300，在画图时，我们可以非常方便地按照实际大小进行绘制。
context.fillStyle = 'white'; context.fillRect(0, 0, width, height);
这里我们使用上一节相同的方法，将画布设置为白色。
-- -------------------- ---- ------- -------------------- ----------------- --- ----------------- --- ----------------- --- ----------------- --- -------------------- ----------------- - --------- ---- ------ ---------------
这里我们开始绘制一个三角形，首先使用 beginPath() 开始绘制路径，然后使用 moveTo() 将光标移动到指定的点上，接着使用 lineTo() 绘制一条从光标所在位置到指定点位置的线条，重复这个过程即可绘制出任意的多边形，最后使用 closePath() 关闭路径，使得最后一条线条和第一条线条连成一条闭合的路径，最后使用 fillStyle 属性设置颜色，并调用 fill() 方法填充到该路径内。
context.beginPath(); context.arc(7, 3, 2, 0, Math.PI * 2, false); context.closePath(); context.lineWidth = 4; context.strokeStyle = 'hsl(50, 50%, 50%)'; context.stroke();
这里我们使用 arc() 方法绘制一个圆，圆心坐标为 (7, 3)，半径为 2，角度从 0 到 2π，颜色为灰色，接着我们使用 lineWidth 属性设置线条宽度为 4，使用 strokeStyle 属性设置颜色，最后使用 stroke() 方法将路径绘制成线条。
context.beginPath(); context.arc(14, 3, 2, 0, Math.PI * 2, false); context.closePath(); context.fillStyle = 'hsl(340, 50%, 50%)'; context.fill();
这里我们开始绘制第二个圆，并在其中填充红色，以此完成本节绘制形状的演示。
立即发布并分享你的作品
现在，你已经学会了如何使用 canvas-sketch-cli 创建、绘制画布和形状，那么接下来分享你的作品吧！在命令行中输入以下命令即可将你的作品发布到 Sketchpad：
canvas-sketch my-sketch.js --new --open --output dist --build
执行该命令之后，系统会为你编译、生成和打包你的作品，并将其发布到网络上，你可以通过任何具有互联网功能的设备浏览并分享你的作品。参考文档中提供了更多关于这个命令的详细说明和示例。
总结
本篇文章介绍了如何使用 npm 包 canvas-sketch-cli 来创建、绘制和分享你的作品，上述步骤中，我们演示了如何创建一个空白画布、绘制三角形和圆、设置画布尺寸、单位、像素密度和颜色等等。通过本篇文章的学习，相信你已经成功入门并掌握了 canvas-sketch-cli 的基本知识和用法，期待你能够进一步探索该框架并创作出更棒的艺术作品！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3535cedbf7be33b2566eb1