回答編集履歴
1
追記
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
動作サンプル
|
|
2
2
|
[https://jsfiddle.net/39we73t1/](https://jsfiddle.net/39we73t1/)
|
|
3
3
|
|
|
4
|
-
まず複数のcanvasがあるので、グローバル変数で全部賄うことはかなり複雑になります。なので、基準となるCanvasを各関数に渡していくことで、「このCanvasに対して処理をする」ことを明確にします。各functionに引数の先頭にcanvasが追加されているのがわかりますね？これで「このcanvasに対してdrawWave、drawSineの処理をするぞ」というのが分かるようになります。contextも毎回canvasに持たせたcontextCacheを使うことで、このcanvasのcontextであることが分かります。
|
|
4
|
+
まず複数のcanvasがあるので、グローバル変数で全部賄うことはかなり複雑になります。なので、基準となるCanvasを各関数に渡していくことで、「このCanvasに対して処理をする」ことを明確にします。各functionに引数の先頭にcanvasが追加されているのがわかりますね？各関数の中でも、いままでグローバルで1個しかなかったwidth等がcanvasから取られています。これで「このcanvasに対してdrawWave、drawSineの処理をするぞ」というのが分かるようになります。contextも毎回canvasに持たせたcontextCacheを使うことで、このcanvasのcontextであることが分かります。
|
|
5
5
|
|
|
6
6
|
次に、1回の更新で複数のCanvasを描画するため、「更新処理」と「描画処理」を分離します。updateとdrawという関数に処理を分離しました。時間の計算とかは複数枚ごとにやっちゃうとおかしいですよね？なので1回の処理で1回しかしないでよい処理は更新処理に、各canvasごとにやらなきゃいけない処理はdraw以下に書きます。
|
|
7
7
|
|