HTML5画布的素描效果

Question

我有一张由手绘的城市轮廓组成的 JPEG 图像。我想实现从左到右在空白区域上绘制这些轮廓的缓慢草图效果。如何基于 HTML5 canvas 元素做到这一点？例如将此 JPEG 导入画布并在其上应用一些动画蒙版，或者将 JPEG 重新分解为一组曲线（如果可能的话，我想获得适当工具的列表）并使用简单愚蠢的 ctx.lineTo(...) 和其他曲线函数。

先感谢您。

Answer 1

不久前，我向某人展示了如何在画布上制作动画手绘线条的效果。绘图技术在每一帧中只绘制了更多的图像，这似乎几乎达到了您想要的效果。换句话说：

var amount = 1;
function drawMore() {
    ctx.clearRect(0,0,can.width, can.height);
    ctx.drawImage(can2, 0, 0, can.width, amount, 0, 0, can.width, amount);
    amount++;
}
setInterval(drawMore, 90);

将不绘制任何图像，然后它将绘制顶行像素，然后它将绘制顶两行像素，依此类推。看一下：

http://jsfiddle.net/GfGVE/28/