More Related Content
Similar to JS/Canvas Tutorial2 (12)
JS/Canvas Tutorial2
- 8. drawImage
> 画像をcanvasに描く関数
> さらに言えば、canvasの一部をcanvasに拡大・縮小コピーする関数
> 使い方は3種類(主に使うのは2種類)
- drawImage(image,dx, dy)
- imageを座標(dx, dy)にコピー
- drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)
- imageの座標(sx, sy)から(sx+sw, sy+sh)までの矩形を
- 座標(dx, dy)に幅dw, 高さdhでコピー
> 前者は1枚絵、後者はスプライトシートに使う
- imageをctxと勘違いしないように!!
- 9. FPSの管理
> FPS(Frame Per Second)
> 1秒間に画面を更新する回数
> 一般的なゲームだと60fpsだが、今回は30fps
> requestAnimationFrameはfpsを良い感じに保ってくれる
> それだけだと心もとないので30fpsになるよう調整する処理を入れ
てる
- if(new Date() - lastDraw > 1000/30)
- 現在時刻 - 最終更新時刻が 1/30 秒を上回ったら更新