canvas

Arcクラスを作ってキャンバスに円を描画する

JavaScriptのclassとCanvasAPIを組み合わせて、キャンバスに円を描画する利用例を紹介します。

JavaScript：キャンバスに星型(☆)を描画する

よくある一筆書きで描くような星型（☆）をキャンバスに描画する方法です。まずは基本サンプルをご覧ください。

JavaScript：canvasで壁に当たったら跳ね返るアニメーション

arcメソッドで描画した塗りつぶし円をキャンバスの範囲で跳ね返るように見せるアニメーションです。ソースコードは簡単なので理解しやすいと思います。

JavaScript：キャンバスでアニメーションする基本

canvasタグに描いた図形をアニメーションさせる基本です。描画処理を関数化して再帰呼び出しが基本です。requestAnimationFrameメソッドを使うようにすると滑らかな描画が実現できます。

JavaScript：キャンバスに図形を描画する

キャンバスで日本国旗と文字を描画してキャンバスの使い方を学びます。cavasタグへの描画の基本解説です。

JavaScript：端末の短辺に合わせた正方形キャンバスを設定する

どの端末でも同じような縮尺でキャンバスに描いた図形や文字を表示したい。キャンバスサイズを端末の短辺に合わせて正方形とし、端末のサイズが変更された際も対応するようにしました。

JS：キャンバスに表示した文字がずれる場合の対処

JavaScriptでキャンバス（canvasタグ）に表示した文字がずれる場合の対処方法です。結論から言うと、ベースライン設定をきちんとしないと意図した表示にならない可能性があります。

JS：端末の傾きに応じてボールを動かす

この記事ではJavaScriptから加速度センサーを利用する例として、スマートフォンやタブレットなどの端末の傾きに応じて画面上のボールを動かす処理のコード例を示します。