ゲーム製作でHTML5-Canvasを勉強するぞ!! 第2回

| コメント(0) | トラックバック(0)

前回Canvas要素を用意するところまでやったので、早く何か描いてみたいですね。

ところで、Canvasの使い方やリファレンスはHTML5.JPさんがわかりやすいです。

Canvasによる描画は基本的に、beginPathで「これから新しく描き始めるよ!!」と宣言し、画面には描画されないパスというもので形を作ってから実際に描画するという流れのようです。

パスを作る主な関数は、以下のとおり。

moveTo
描画開始点を移動する
lineTo
描画開始点から指定位置まで線を引き、指定位置を次の描画開始点とする
quadraticCurveTo
描画開始点から指定位置まで2次ベジェ曲線を引き、指定位置を次の描画開始点とする
bezierCurveTo
描画開始点から指定位置まで3次ベジェ曲線を引き、指定位置を次の描画開始点とする
arcTo
描画開始点から指定位置まで円弧を引き、指定位置を次の描画開始点とする
arc
指定位置に円弧を描画する
rect
指定位置に矩形を描画する
closePath
描画開始点から最初の描画開始点まで線を引きパスを閉じる

作成したパスを以下の関数で実際に描画します。

fill
パスを塗りつぶす
stroke
パスの輪郭線を引く

これら以外にいきなり描画する関数もあるようです。

clearRect
矩形を透明にする
fillRect
矩形を塗りつぶす
strokeRect
矩形の輪郭を描画する

では早速描いてみましょう。
以下のコードを前回の「var ctx = canvas.getContext("2d");」の下に書きます。

ctx.beginPath();
ctx.rect(0, 0, 300, 300);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();

ctx.beginPath();
ctx.moveTo(150, 140);
ctx.lineTo(140, 160);
ctx.lineTo(160, 160);
ctx.fillStyle = "rgb(64, 64, 255)";
ctx.fill();

全体を黒で塗りつぶしてから、中央に青い三角形を描画します。
ちなみに「fillStyle」で塗りつぶす色を、「strokeStyle」で輪郭の色を指定します。
色値はCSSCOLORなので「#4040ff」とかrgb(64, 64, 255)、アルファ値を含めて「rgba(64, 64, 255, 1.0)」で指定します。
canvas001.png
デモ

思ったより簡単ですが、複雑な図形を描こうとするとコードが長くなりそうですね。
今回描いた三角は当面の間シューティングゲームの自機にしようと思います(^^;

トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/8

コメントする

オリジナルゲーム

オンラインツール