b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2016/12/31

Canvasを使って動きのある図形を描写する

Canavasでキー操作によって動く図形を描画

カーソルキーを押すと、その方向に口を開閉します。

■HTML

■JavaScript

処理概要

・ページロード時に、initが実行される
・init内のsetIntervalによって、tickを200ミリ秒おきに実行
・tick内で口の開閉フラグを反転、paintを呼び出し
・paintにて口の開閉フラグの状態に応じて図形を描写
・カーソルキー押下時、押下したキーに応じて、図形の回転度数を設定(例:↑なら-90度回転)

arcメソッドについて

arcメソッドは、円弧を描くメソッドです。
引数の内容は先頭から、
・x座標
・y座標
・半径
・描き始めの角度
・描き終わりの角度
・半時計周り(ture)、時計回り(false)
となっています。

描き始めと描き終わりの角度の値は、ラジアンで設定します。
これは、1回転(360度)を2*πとする単位です。
度数からラジアンへの変換は、「度数 * π / 180」で求められます。
たとえば、45度は、π / 4となります。

Math.PIについて

Math.PIは円周率です。
表記的には、プロパティのようですが、使い方としては定数のように使います。
下のボタンで、値を表示できます。

ゲームを作りながら楽しく学べるHTML5 CSS JavaScriptプログラミング (NextPublishing)

広告

カテゴリー: IT

曲をつくりました!




オススメ記事


PAGE TOP ↑