Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

ソース

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の知識が必要。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away