Lesson1で表示した黒い長方形が、ゲーム画面である。
このままだと画面サイズが使い難い。
というわけで、画面のサイズを好きなサイズに変更する方法の説明。
今日の流れ
1.Lesson1をフォルダごとコピー後名前の変更をしてLesson2とする。
2.canvas.jsを変更する。
3.index.htmlを開く
1.フォルダアイコンを右クリック→コピー、右クリック→貼り付けでコピー後名前の変更をしてLesson2とする。
2.canvas.jsを変更する。
内容
window.onload = function()
{
var canvas1 = document.getElementById('CV1');//指定したidの要素を取得
canvas1.height = 300;//画面の高さ
canvas1.width = 300;//画面の幅
var context = canvas1.getContext('2d');//描画メソッドを使用するための準備
context.fillRect(0,0,500,500);//四角を描画
}
3.index.htmlを開く
成功していれば、黒い正方形が表示されている。
今回の変更点は
canvas1.height = 300;//画面の高さ
canvas1.width = 300;//画面の幅
//はコメントアウトと言い、プログラムには影響しないメモ書きのことである。
//の後から改行するまで有効。
300のところを大きい数字に変更すると画面が大きくなる。
小さい数字にすると画面が小さくなる。
縦と横は同じ大きさでなくても良い。
成功していれば
ゲーム2のようになっているはず。
枠と塗りつぶし【HTML5 JavaScript ゲーム作成 講座】3
[0回]
PR
