4

手でスケッチした都市の輪郭からなる JPEG 画像があります。これらの輪郭を空の領域に左から右に描画する、ゆっくりとスケッチする効果を実現したいと考えています。HTML5 の canvas 要素に基づいてそれを行うにはどうすればよいですか? この JPEG をキャンバスにインポートしてアニメーション化されたマスクを適用するか、代わりに JPEG を一連の曲線にリファクタリングし (可能であれば、適切なツールのリストを取得したい)、これらの線をsimple-stupid ctx.lineTo(...) およびその他の曲線関数。

前もって感謝します。

4

1 に答える 1

2

少し前に、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);

画像を何も描画せず、次にピクセルの一番上の行を描画し、次にピクセルの一番上の2行を描画します。以下を見てください:

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

于 2011-08-04T18:05:52.587 に答える