「Canvasアニメ」 荒く歩く人

HTMLのCanvasという機能を使って、「荒く歩く人」を作りました。本当は「荒く歩く人」ではなく、「なめらかに歩く人」を作りたかったのですが、「荒く歩く人」になってしまいました。

デモ


実現の方法

歩いている人の絵を8枚用意します。

f:id:carrot_boy:20170106144057p:plain

こんな感じです。次はエディタで次のファイルを作成します。

コードの説明を少しします。

var walkGirl = new Image();
walkGirl.src = walkGirlFrame[0];

このコードで画像オブジェクトを作り、画像パスを設定します。walkGirlFrameは配列で画像パスの文字列が8個入っています。

ctx.drawImage(画像オブジェクト, 画像の左上の角の位置のx座標, 画像の左上の角の位置のy座標, 画像の横幅, 画像の縦幅)

このように、画像の表示の仕方を設定できます。

setInterval(function(){
何ミリ秒おきに行う処理
},インターバル);

この関数を使うことで、200ミリ秒おきに、表示する画像を切り替えてアニメーションを実現させます。

反省点

オレンジの髪の人が上下にぶれたりして、スムーズに歩いているように見えません。この理由は、それぞれの画像の中心に人物を配置できていないためです。画像はcssで作った円、楕円、三角などをpreviewという画像ソフトで切ったり、貼ったりしました。previewというソフトは画像の中心位置などが分かりにくいと感じました。ようは適当に作ってしまったので、画像がぶれたり、顔の大きさが変わるわけですね。もっと簡単に動くwebサイトが作れないかなと思いました。