今日やったこと

　トランプの画像をcanvasに切り出すコードを書きました。下が利用したトランプの画像。GAMEDESIGNさんからお借りしました。

　
　drawImageという関数を使って画像を切り出すのですが、どの範囲を切り出すかを指定しなければなりません。とはいえカード一枚の大きさは固定ですから、(x,y)=(0,0)の地点からカード何枚分移動、という感じで始点を決めればオーケーです。私は下のように書きました。

$(function(){

	var canvas = document.getElementById("gamearea");

        //canvasのエレメントを取得

	var ctx = canvas.getContext('2d');
	var sizeX = 56;//カードの横幅

	var sizeY = 80;//カードの縦幅

	var xy;

	var x;

	var y;

	
	var img = new Image();

	img.src = "./img/trump.gif?" + new Date().getTime();

	//画像の読み込み
	xy = trumpIndex(3,13);

        //ダイヤのキングの切り取り位置を取得
	img.onload = function(){

		　　　ctx.drawImage(img,xy[0]*sizeX,xy[1]*sizeY,sizeX,sizeY,0,0,sizeX,sizeY);

	}
	

});
function trumpIndex(mark,number){

	var y;

	var x;
	y = mark * 2;

        //マーク一つ当たり二列使っているので
	number = number - 1;


	if(7 < number){

		number = number - 7;

		y++;

	}

        //折り返しに対応
	x = number;
	return [x,y];

}

　まだまだ改良の余地はありそうですが、今日はまぁこんなところです。