キャンバスのチュートリアル
このチュートリアルは、 <canvas>
要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。
<canvas>
は HTML の要素であり、スクリプト(ふつうは JavaScript)を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。
<canvas>
は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。
始める前に
<canvas>
を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas>
要素に対応していませんが、最近のバージョンの主要ブラウザーはすべて対応しています。キャンバスの既定の大きさは、 300 ピクセル × 150 ピクセル(幅 × 高さ)です。しかし、 HTML の height
および width
プロパティを使用して、独自の大きさを定義することができます。キャンバスにグラフィックを描画するためには、JavaScript のコンテキストオブジェクトを使用します。このオブジェクトは、グラフィックをその場で生成します。