canvas-sketch —— 把创意直接画在 Canvas 上，设计师的速写神器

canvas-sketch 是个超简洁的 HTML5 Canvas 创意编程框架。它不抢你的活，就给你一张纸 + 一支笔，剩下的看你。

为什么不是 Figma / Sketch

Figma 是协作工具，canvas-sketch 是创作工具。区别就像 Notion vs Markdown —— 一个是平台，一个是原料。

典型使用场景

• Generative Art（生成艺术）：用代码生成视觉
• 数据可视化草图：快速试不同的视觉表达
• 创意编程教程：录屏演示像素级动画
• Particle / 物理效果：快速 prototype

上手示例

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

const settings = {
  dimensions: [1080, 1080],
  animate: true
};

canvasSketch(({ update }) => {
  // 你的绘制逻辑
  return ({ context, width, height, time }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
    // ...
  };
}, settings);

亮点

• 零依赖：核心就 200 行
• 支持热重载：改代码立刻看到效果
• 可导出 PNG / SVG / 视频
• 支持 shader / WebGL（可选）

GitHub

github.com/mattdesl/canvas-sketch

⭐ 5.3k+ / MIT / mattdesl（Canvas 创意编程圈大牛）