跳到正文
网页珍奇柜Web Curio

网页版经典画图

JS Paint，Isaiah Odhner (1j01)，2014 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

原作直展：这是 Isaiah Odhner (1j01) 的原始作品，按 MIT 许可证收录（版本 53be67a）。原作原样展出。为了控制体积，没有收录「眼动控制」和「导入 PDF」两个功能；联网协作和上传在这里也不可用。其余画图功能都能用。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步画布工具基于 canvas 2D 的像素操作，例如扫描线洪水填充。
  2. 第 2 步选区、撤销历史以图像快照管理。
  3. 第 3 步UI 用 CSS 复刻 Win98 的立体边框与位图图标。
  4. 第 4 步可作为 PWA 离线使用。

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Use a canvas with imageSmoothingEnabled false and implement tools on ImageData: a Bresenham line for the pencil, a scanline flood fill for the bucket, and random points within a radius for the airbrush on a timer. Keep an undo stack of ImageData snapshots (or dirty-rect patches). Build the chrome with CSS bevels (two-tone borders and inset box-shadows), a 28-swatch palette, and a status bar showing pointer coordinates. Add one modern surprise of your own as an 'Extras' menu.

定制成完整的实现提示词

档案

能不能拿来用

原作以 MIT 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Live app loads (HTTP 200, title 'JS Paint'); gh api: MIT, created 2014-02-07.