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

FOR SE

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

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

【HTML5・javascript】canvasにcanvas要素を追加することで、自由に四角を描く

【今回の紹介】



掲題の通りです。



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

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



f:id:forsebyse:20140720103755p:plain




処理の流れとしては、

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

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

 ③①と②座標を取得する

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

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

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


【参考ソース】

<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);
}
.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; }