最近做了一个小小的浏览器绘画实验：上传一张照片，程序便会模仿古典绘画的工作顺序，让画面从空白底色中一层层显现出来。

它并不是真的懂得怎样画画，也不是生成一张新的 AI 图片，而是把原图处理成六个视觉阶段，再用许多带方向和透明度的笔触逐步揭开。这样看起来，就像有人正拿着画笔在画布上工作。

在独立页面中打开动画

怎样使用

点击“上传图片”，选择 JPG、PNG 或 WebP；也可以直接把图片拖进上传框。载入完成后，动画会自动播放。

下面的进度条可以前后拖动，“播放／暂停”和“重播”用来控制过程，速度则可在 0.5 倍到 2 倍之间选择。竖图、横图和方图都可以使用，画布会依照原图比例调整，不再把图片硬拉成固定尺寸。

图片只在你的浏览器里读取和处理，不会上传到服务器。刷新或关闭页面以后，网页也不会保留它。

六层绘画过程

我把过程拆成了六步：

1. 铺暖色底：先给画布一层棕褐色基调，避免从刺眼的纯白开始；
2. 起草图：把原图转成接近素描的轮廓与结构；
3. 铺暗部和大关系：先建立明暗，不急着追逐局部细节；
4. 上主要颜色：逐步恢复原图的综合色彩；
5. 罩染和统一色调：用偏暖的颜色把各部分重新拢在一起；
6. 提亮和收拾细节：最后补回高光、边缘和较清晰的细节。

动画中的画笔并非固定走一条直线。程序会为不同阶段生成大小、长度和方向略有差异的笔触，再按进度逐批画出，所以草图阶段比较细碎，铺色阶段更宽更松，最后的笔触又会收紧。

这次修正了什么

最初版本最明显的问题，是上传后的图片会被套进预设的竖幅画框；横图和方图虽然能够播放，却会被挤压变形。

现在画布会先读取图片的真实宽高，再以同一个缩放比例适应浏览器窗口。也就是说，宽和高一起放大或缩小，图片本身的比例始终不变；尺寸很大的图片则会先缩至适合浏览器处理的范围，以免动画太卡。

整个实验只用了 HTML、CSS、JavaScript 和 Canvas，没有后端，也没有外部图片服务。它更像一种“过程的幻觉”：不是教机器成为画家，而是把完成的图像拆回若干阶段，让我们重新观看一幅画如何从无到有。