Lesson2で画面サイズの変更方法を示した。 しかし、実はfillRectは塗りつぶすものであるため、後に用いると既に描画したものを上書きしてしまう。
というわけで、枠だけ描画する方法と自キャラらしきものを作る。
今日の流れ
1.Lesson2をフォルダごとコピー後名前の変更をしてLesson3とする。
2.canvas.jsを変更する。
3.index.htmlを開く
1.いつもどおりコピー
2.canvas.jsを変更する。
内容
window.onload = function()
{
var canvas1 = document.getElementById('CV1');//指定したidの要素を取得
canvas1.height = 300;//画面の高さ
canvas1.width = 300;//画面の幅
var context = canvas1.getContext('2d');//描画メソッドを使用するための準備
context.strokeStyle = "rgb(0, 0, 0)";//枠の色を指定する
context.strokeRect(0,0,300,300);//枠を描画
var char_x = 30;//自キャラ幅
var char_y = 30;//自キャラ高さ
context.fillStyle = "rgb(0, 0, 0)";//四角の色を指定する
context.fillRect(135,270,char_x,char_y);//自キャラを描画:
}
3.index.htmlを開く
成功していればの
ゲーム3ように黒枠に黒の自キャラが表示されているはず。
自キャラと言っても、ただの四角だが。
strokeRectは枠を描画する
fillRectは塗りつぶした四角を描画する
という違いがある。
キー操作【HTML5 JavaScript ゲーム作成 講座】4
[0回]
PR
