JavaScript

1kbのソースが読めなくて辛い

More than 3 years have passed since last update.


ソース

1.png


jsbeautifier



  • jsbeautifierにソースを貼り付けて読みやすくする。

2.png


出力結果

3.png

改行位置やスペース挿入などで少し見れるようになった。


for文の括弧を書いて範囲を読みやすくした

4.png



少し読んでみる


canvasのidの取得

5.png

b.getContext と b どこから来た?と思ったが

canvasのidは getElementById()使わなくても即座に b.getContext とかけるんですね。


現在のところ、getContext()メソッドでは'2d'という引数のみがサポートされています。 で平面図形を描く際には'2d'を指定します。



処理を呼び出す部分

6.png

setTimeoutで function u() を 1ms(千分の1秒) ごとに呼んでいる。

もしフレームレートを下げたい場合は setTimeout(u,10) のように値を増やせば良い。


requestAnimationFrame


setIntervalの問題点としてそもそもアニメーション向けのmethodではないのでintervalの呼び出し単位とブラウザの描画更新単位が一致しない

それを解決するためブラウザの描画更新単位と同じ単位で呼び出されるrequestAnimationFrameが登場した


7.png


「連続で呼び出されるイベントの間引き」


試しに requestAnimationFrame をコメントアウトして動かしてみたが、高スペックPCなのに重すぎてCPU100%。ピクリとも動かない。

逆にsetTimeout(u,0);でも問題なく動いた。

ブラウザの描画更新単位で実行の大切さがわかった。


Canvasに主に描画の命令を出しているとこ

8.png


音を再生させたり、ロゴ入れたりしているとこ

9.png

ここから先は数学とcanvasの知識が必要。