読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }