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

FOR SE

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

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

【HTML5・javascript】canvasにマウスで線を描く

【今回の紹介】


掲題の通りです。



【内容】

ソース的な以下の部分がわかりにくいのでメモしときます。

 ①マウスが押されてから、マウスが動いている時のイベントを拾うために
  グローバル関数を使用していること 
  ちなみに、

mousedown=false;  


 ②描画の終わりを同じくマウスが押されてかどうかの変数の値をみていること

【参考手順】


ちなみに自分は以下の手順で学習しました。

 ①カーソルの値を取得する

 ②べた書きの座標に線を引く

 ③マウスイベント(押されたとき、動かしているとき、離しているとき)を拾う 

 ④マウスイベントと座標の取得、描画を組み合わせるという手順で学習しました。


【参考】

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



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



//canvasの初期値設定//
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;
		mousedown=true;
		console.log(startX,startY);
		}


canvas.onmousemove
	= function(e){
			if(mousedown){
			draw(e.pageX,e.pageY);
			}

canvas.onmouseup
	=function(e){
		mousedown=false;
	}
}



//描画処理//

function draw(x,y){
	var target=$("canvas");
	var context=target.getContext('2d');
	context.beginPath();
	context.moveTo(startX,startY);
	context.lineTo(x,y);
	context.closePath();
	context.stroke();

	//次の座標の出発点を設定
        startX=x;  
	startY=y;
	}



//DOMのobjを返す//		
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; }