質問: "#99ff66";//緑色 //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。 ctx.rect(x,y,100,200);//rectは、rectangel(長方形、矩形)の略である。 //円形のパスを作成。 //ctx.arc(100,100,40,0,Math.PI*2);//第一引数と第二引数が座標(横縦)、第三引数が半径、第四が円の始まりの角度、第五が円の終わりの角度、第六が描く向き //fillで長方形を塗りつぶす。何も指定しないと黒色となる。 ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。 //最後にbeginPathで開始したパスを閉じる。 ctx.closePath(); requestAnimationFrame(draw); setTimeout(draw,interval); } draw(); ``` ブラウザがchrome61.0.3163.100でosがwindows10での環境での疑問です。
回答: > > 1setTimeoutメソッドを利用すると、「指定した間隔」と「ブラウザが画面を更新するタイミング」に差が生じるとはどういうことなのでしょうか。 > > > `setTimeout`メソッドによる処理のスケジューリングは「ブラウザが画面を更新するタイミング」とは無関係に行われます. つまり, 画面を更新する直前かもしれませんし, 直後かもしれません. 一方`requestAnimationFrame`メソッドによる処理のスケジューリングは「ブラウザが画面を更新する直前」であることが保証されます. canvas要素でアニメーションを実現する場合, スクリーンが書き換わる前に一度だけグラフィックを書き換えれば良いので, `requestAnimationFrame`メソッドのほうが適していることになります. NOTE: とは言え, JavaScriptでは何れのメソッドを用いたとしても**確実に指定した時刻に処理を行わせることは出来ません**. あくまで「処理の実行を予約」するだけです. 直前に重い処理が挟まると容易に実行時刻はズレます. `requestAnimationFrame`メソッドでは**次の次**のフレーム更新時かもしれません. > > 2 > > > コードにバグがあります ``` requestAnimationFrame(draw); setTimeout(draw,interval); ``` 上記コードにより処理のスケジューリングが倍々ゲームで増えています. 後者をコメントアウトして下さい.