Canvas 勉強中のメモ その2
ほぼ1ヶ月くらい放置していましたが
やっとこさ作りたいもののアイデアが浮かんできたため
Canvasの勉強の再開です。
前回は図形の描画ができたところで終了していますので
今日は絵を動かすところからです。
前回の記事
Canvas 勉強中のメモ その1 - newononeが作るネットサービス更新記録
Canvasでは絵を動かす命令が無いため、
消去→描画を繰り返すことで絵を動いてるように
見せる必要があるとのことです。
試しにルーレット的なサンプルを書いてみました。
図形を回転させるrotateメソッドを使わずに自力で
すこしずつずらして描画することで回転しているように見せます。
手順
- 消去(clearRectメソッド)
- 図形を描く
- 時間を待つ(setInterval)
の繰り返しです。
できました。
一応回転しているように見えます。
ソースコードは右クリックでどうぞ。
