ソース
jsbeautifier
- jsbeautifierにソースを貼り付けて読みやすくする。
出力結果
改行位置やスペース挿入などで少し見れるようになった。
for文の括弧を書いて範囲を読みやすくした
少し読んでみる
canvasのidの取得
b.getContext と b どこから来た？と思ったが
canvasのidは getElementById()使わなくても即座に b.getContext とかけるんですね。
現在のところ、getContext()メソッドでは'2d'という引数のみがサポートされています。 で平面図形を描く際には'2d'を指定します。
処理を呼び出す部分
setTimeoutで function u() を 1ms(千分の1秒) ごとに呼んでいる。
もしフレームレートを下げたい場合は setTimeout(u,10) のように値を増やせば良い。
requestAnimationFrame
setIntervalの問題点としてそもそもアニメーション向けのmethodではないのでintervalの呼び出し単位とブラウザの描画更新単位が一致しない
それを解決するためブラウザの描画更新単位と同じ単位で呼び出されるrequestAnimationFrameが登場した
「連続で呼び出されるイベントの間引き」
試しに requestAnimationFrame をコメントアウトして動かしてみたが、高スペックPCなのに重すぎてCPU100%。ピクリとも動かない。
逆にsetTimeout(u,0);でも問題なく動いた。
ブラウザの描画更新単位で実行の大切さがわかった。
Canvasに主に描画の命令を出しているとこ
音を再生させたり、ロゴ入れたりしているとこ
ここから先は数学とcanvasの知識が必要。
- Math.pow : べき乗
- Math.abs : 絶対値
- Math.sin : sin関数
- c.scale : HTML canvas scale() Method
- c.lineto : HTML canvas lineTo() Method
- c.translate : HTML canvas translate() Method
- c.fillText : HTML canvas fillText() Method