新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、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; }