【HTML5・javascript】canvasにマウスで四角を描く - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

掲題のものを作ったので、メモしときます。

【内容】

シンプルな作りです。
以下のイベントのときの座標をとって描画しています。
　・マウスを押下したとき
　・マウスを離したとき

【参考ソース】

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
<canvas id='canvas'></canvas>
<script>
　startX=0;
　startY=0;


window.onload=function(){
	canvas=$('canvas');
	expandCanvas();
	}


function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
　}

canvas.onmousedown
	= function(e){
		startX=e.pageX;
		startY=e.pageY;
	}


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




function draw(x,y){
	console.log(canvas);
	var context=canvas.getContext('2d');
	context.strokeStyle='#FFFF00';
	context.strokeRect(startX,startY,x-startX,y-startY); 
	
	}

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


</script>
</body>
</html>