【HTML5・javascript】canvasにcanvas要素を追加することで、自由に四角を描く - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

掲題の通りです。

【内容】
以下の理由で、canvas要素を追加することで、自由に四角を描くサンプルを作成しました

①bodyに大きなcanvasを生成して、四角を描くサンプルなどはたくさんありますが
　canvasを追加していくというサンプルがなかったこと
②今後、一つ一つのcanvasobjにプロパティとメソッドを持たせたかったこと

f:id:forsebyse:20140720103755p:plain

処理の流れとしては、

　①マウス押下時に座標を取得する

　②マウスを離した時の座標を取得する

　③①と②座標を取得する

　④①の座標を四角の絶対位置（描画開始位置）とする

　⑤①の描画開始位置と②の描画終了位置で四角を描く
　　※canvasの四角を描くときは、開始位置が（０、０）になるため、計算に注意する

　⑥もし、開始終了位置が負の数ならば、終了座標を開始座標に、開始座標を終了座標とする

【参考ソース】

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body id='body'>
<div id='div' style="width=800;height=800;"></div>
<script>
startX=0;
startY=0;
mousedown=false;
window.onload=function(){
	canvas=$('body');
	}


body.onmousedown
	= function(e){
		startX=e.pageX;
		startY=e.pageY;
		mousedown=true;
		}


body.onmouseup
	=function(e){
			var endX=e.pageX;
			var endY=e.pageY;
			draw(endX,endY);
			mousedown=false;
	}




function draw(x,y){	
	var canvas=document.createElement("canvas");
	canvas.style.backgroundColor = "#eeffee";   // キャンバスの背景色
	canvas.width=Math.abs(x-startX);
	canvas.height=Math.abs(y-startY);
	canvas.style.position="absolute";
	var context=canvas.getContext('2d');
	
	//描画する四角の座標(mouseup後の座標)がマイナスの時野判定を行う
	if(x-startX>0 && y-startY>0) {
		canvas.style.top=startY;
		canvas.style.left=startX;
		body.appendChild(canvas);
		console.log(startX,startY,x-startX,y-startY);
	}
	else{
		canvas.style.top=y;
		canvas.style.left=x;
		body.appendChild(canvas);
	}
	}

		
function $(id){
	return document.getElementById(id);
}