Restoration
6/11/2016 - 5:57 AM

キャンバスのメモ

キャンバスのメモ

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Canvas</title>
</head>
<body>
<script>
onload = function(){
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	//イメージオブジェクの作成
	var img = new Image();
	img.src = 'img/image';//画像までのパス

	//画像を読み込み後実行
	img.onload = function(){
		/*
			slice_x スライスするx軸の距離
			slice_y スライスするy軸の距離
			slice_w スライスする画像の横幅
			slice_h スライスする画像の高さ
			x       画像を表示するx軸の位置
			y       画像を表示するy軸の位置
			width   表示する画像の横幅
			height  表示する画像の縦幅
		*/
		//描画処理
		//drawImage(x,y,width,height);
		context.drawImage(50,50,500,500);
		//トリミング処理
		//drawImage(slice_x,slice_y,slice_w,slice_h,x,y,width,height);
		//context.drawImage(img,300,70,500,500,50,50,500,500);
	}
}
</script>

<canvas id="canvas" width="500" height="500"></canvas>

</body>
</html>