今回はサンプルの動作です。サンプルを見ながら本セクションの描画処理を確かめます。

サンプルのindex-306-cash.html をブラウザで開きます。開いたところがこちらです。

これまでのキャンバスの描画を、別途用意したキャンバスにキャッシュとしてして貼り付け、そのキャッシュからこちらに縮小して描画しています。

こうした描画を毎フレーム行うのはそれなりに計算処理がかかります。そして一度描画したこうした背景盤面スコアなどは、それほど頻繁に変わるものではありません。そのため作成したこうした描画の状態を、別のキャンバスにキャッシュとして保存しておき、通常の描画ではそのキャッシュからメインのキャンバスに貼り付ける。こうすることで描画に係る計算時間を抑えます。

今回のサンプルではキャッシュに対する描画、そしてキャッシュからメインのキャンバスに対する描画、これらの処理を行っていくことにします。今回はサンプルの動作について話をしました。