ゼロからわかる現代JavaScript

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

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３２．矩形の描画。「canvas」

*最新のIE9が必要です。

前回と同じくcanvasについてです。

今度は矩形を描画してみましょう

・rect

rectメソッドは、引数に（始点Ｘ，始点Ｙ、横幅W、　縦幅H）

を必要とします。

これは簡単ですね。

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

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

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

　　//x=20,y=20の座標に横幅100縦幅100の矩形を描画(予定)
　　ctx.rect(20, 20, 100, 80);

　　//塗りつぶす色を指定(予定)
　　ctx.fillStyle = "rgb(255, 0, 0)";

　　//塗りつぶし(予定)
　　ctx.fill();

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

さらにプロパティ

・fillstyle

を使い色を指定します。rgb以外も#FF0000などのhtmlなじみの指定方法も使えます

・fill

そしてfillメソッドを使い矩形を塗りつぶします。

実行結果

コラム：

canvasの描画方法は他のActionScriptやC#などにも応用できるものです。