canvas-sketch 项目安装与使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00161/article/details/148506403

canvas-sketch 项目安装与使用指南

canvas-sketch [beta] A framework for making generative artwork in JavaScript and the browser. 项目地址: https://gitcode.com/gh_mirrors/ca/canvas-sketch

前言

canvas-sketch 是一个强大的创意编程工具集，特别适合用于生成艺术、数据可视化和创意编码项目。本文将详细介绍如何安装和使用 canvas-sketch 工具链，帮助开发者快速搭建创意编码环境。

环境准备

在开始使用 canvas-sketch 前，需要确保系统满足以下基本要求：

Node.js 15 或更高版本 - 这是运行 JavaScript 代码的运行时环境
npm 7 或更高版本 - Node.js 的包管理工具
命令行终端 - 用于执行安装和运行命令

对于不熟悉命令行工具的用户，建议先学习基本的终端操作，如创建目录、切换目录等基础命令。

三种安装方式详解

canvas-sketch 提供了三种不同的安装方式，适合不同的使用场景：

1. 使用 npx 快速启动（推荐新手）

npx 是 npm 自带的工具，可以直接运行远程包而不需要预先安装。这种方式最适合快速体验和临时使用：

# 创建项目目录
mkdir my-generative-art
cd my-generative-art

# 创建新草图并启动开发服务器
npx canvas-sketch-cli --new --open

执行后会：

在 sketches 目录下创建新的草图文件
自动生成 package.json 文件
安装必要的依赖
启动开发服务器并打开浏览器

2. 全局安装 CLI 工具

适合经常使用 canvas-sketch 的开发者，安装后可以在任何目录直接使用：

npm install canvas-sketch-cli --global

安装后使用方式：

canvas-sketch sketch.js --new --open

3. 本地项目安装

适合团队协作或需要精确控制依赖版本的项目：

npm install canvas-sketch-cli --save-dev

使用方式：

npx canvas-sketch my-sketch.js --open

基础使用教程

安装完成后，让我们创建一个简单的示例：

系统会生成一个基础模板文件，内容如下：

const canvasSketch = require('canvas-sketch');

const settings = {
  dimensions: [2048, 2048]
};

const sketch = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);

修改 fillStyle 为其他颜色，如 'red'，保存文件后浏览器会自动刷新
在浏览器中按 Cmd+S (Mac) 或 Ctrl+S (Windows) 可以将画布导出为 PNG 图片

进阶功能

canvas-sketch 提供了丰富的模板和功能：

# 使用Three.js模板创建新项目
canvas-sketch --new --template=three --open

# 构建可分享的HTML+JS网站
canvas-sketch sketches/my-sketch.js --build

# 从剪贴板创建新草图
pbpaste | canvas-sketch foo.js --new