ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３１．線の描画。「canvas」

*最新のIE9が必要です。

最新のブラウザではHTML5という次世代要素が扱えます。

その新機能の一つにcanvasがあります。

HTML5とjavascriptの関係は非常に密接で、
javascriptの拡張機能の一つだと思った方が良さそうです。

それではcanvasの使い方を見ていきましょう。

前回と同じように、DOMを使って、canvas要素を追加します

HTMLファイルの中に

<body onload ="main()">

と記述しmainメソッドを実行するのは分かりきっていますね。

そして

var ctx = canvas.getContext("2d");

と、コンテキストを取得します。

コンテキストとは、プログラムの実行に必要な各種情報のことです

getContextの引数はIDになります。

今回使用するソースコード

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　//x=20,y=20の座標に移動(予定)
　　ctx.moveTo(20, 20);
　　//x=120,y=20まで線を引く(予定)
　　ctx.lineTo(120, 20);

　　//実際に線を描く
　　ctx.stroke();
}

そして取得されたコンテキストオブジェクト ctx に対してメソッドを実行します

表示画面の座標は

X座標：左が０で右に行くほど大きくなります。

Ｙ座標：上が０で下に行くほど大きくなります。

・moveTo

線の描画の開始位置を(X、Y)で指定

・lineTo

線をどこまで引くかを(Ｘ，Ｙ)で指定

・stroke

moveToやlineToなど予定されたデータを、実際に描画します。

実行結果

コラム：

<canvas>タグをHTMLに記述する方法でも実現できます