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); 

など、それはピクセルの上の2つの行を描画します、それはピクセルの一番上の行を描画します、画像のどれを描画しません見てください：

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