javascript - 使用 HTML5 画布绘制草图效果

Question

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

先感谢您。

Answer 1

不久前，我向某人展示了如何在 Canvas 上制作动画手绘线的效果。绘图技术每帧只多绘制一点图像，这似乎几乎可以满足您的需求。换句话说：

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/