1024進捗報告

myscript

//myscript.js

window.onload = function(){
	draw();
}

function draw(){

	var canvas = document.getElementById('mycanvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	////////// 外枠の設定 //////////
	soto_x = 10
	soto_y = 10
	soto_w = 2000
	soto_h = 2000
	// 外枠の描画
	// ctx.strokeRect(soto_x, soto_y , soto_w, soto_h)   // 外枠はうまくサイズ調整出来ないので描画しないでおいた
	// .strokeRect(x座標, y座標, 幅, 高さ)

	////////// 島の設定 //////////
	// 左の島
	shimaL_x = soto_x + 10
	shimaL_y = soto_y + 10
	shimaL_w = 300
	shimaL_h = 610
	// 中の島
	shimaC_x = shimaL_x + shimaL_w + 10
	shimaC_y = shimaL_y
	shimaC_w = shimaL_w
	shimaC_h = shimaL_h
	// 右の島
	shimaR_x = shimaC_x + shimaC_w + 10
	shimaR_y = shimaL_y
	shimaR_w = shimaL_w
	shimaR_h = shimaL_h
	// 島の描画
	ctx.strokeRect(shimaL_x, shimaL_y, shimaL_w, shimaL_h)
	ctx.strokeRect(shimaC_x, shimaC_y, shimaC_w, shimaC_h)
	ctx.strokeRect(shimaR_x, shimaR_y, shimaR_w, shimaR_h)

	////////// 席の設定 //////////
	seki_x = shimaL_x + 10
	seki_y = shimaL_y + 10
	seki_w = (shimaL_w -20)/4
	seki_h = 50
	retsu_max = 10
	// 席の描画 
		// k:島の数 j:列の数 i:1列にあるPCの数
	for(var k = 0 ; k < 3 ; k++)
		{
			for(var j = 0 ; j < retsu_max ; j++)
			{
				for(var i = seki_x + k*shimaL_w + k*10 ; i < (seki_x + k*shimaL_w + k*10 + 3*seki_w + 1) ; i = i + seki_w)
					{
						ctx.strokeRect(i, seki_y + j*(seki_h + 10), seki_w, seki_h)
					}
			}
		}

	////////// 文字の描画 //////////
	ctx.font = 'bold 18px Verdana';
	ctx.fillStyle = "pink"
	ctx.fillText(' us000000 ',30,55,70) // .fillText('文字列',x座標,y座標,最大幅)
	ctx.fillText(' 成蹊太郎 ',30,75,70)

}