canvas

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

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

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

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

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

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