初めてCanvasを使ってみるテスト。

シェアする

初めてCanvasを使ってみるテスト。当然IEは動かない。対応まだー?
とりあえず3角形と画像の読み込みなんかをやってみる。あんまり時間が無かったのでこんだけ。Mozilla の Canvas チュートリアルは一通り目通したぐらい。


<canvas id='tutorial' width='200' height='200'></canvas>
<script type='text/javascript'>
	var x = 50;
	var y = 50;
	var img = new Image();
	img.src = '//loumo.jp/img/2009/09021400.png';
	var draw = function(x, y) {
		var offset_x = 175;
		var offset_y = 175;
		var canvas = document.getElementById('tutorial');
		if (canvas.getContext) {
			var ctx = canvas.getContext('2d');

			ctx.fillStyle = 'rgb(255,255,255)';
			ctx.fillRect(0,0,200,200);

			ctx.drawImage(img, 0, 0, 120, 100)

			ctx.stroke
			ctx.beginPath();
			ctx.moveTo(x, offset_y);
			ctx.lineTo(offset_x, offset_y);
			ctx.lineTo(offset_x, y);
			ctx.lineTo(x, offset_y);
			ctx.stroke();
		}
	}
	document.onload=draw(x,y);
</script>
<br />
<input id='x_up' type='button' name='x up' value='x up' onclick='draw(x--,y)' />
<input id='x_down' type='button' name='x down' value='x down' onclick='draw(x++,y)' />
<input id='y_up' type='button' name='y up' value='y up' onclick='draw(x,y--)' />
<input id='y_down' type='button' name='y down' value='y down' onclick='draw(x,y++)' />
Sponsored Link

シェアする

フォローする

コメント

  1. taku より:

    X軸って右が+な気がするぜ

  2. jklryo より:

    長さ増やしてるだけだからこのままでおk