Javascriptで四角い枠をドラッグして大きさを変える処理

四角い枠を表示する

以下、完成したコードです。ローカルPCにhtmlのファイルとして保存してから、ブラウザで起動して下さい。ドラッグしている間は、四角い枠の大きさをマウスの移動で帰ることが出来ます。ドラッグを離したときに四角い枠の大きさが固定されます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	var start_x = end_x = 0;
	var start_y = end_y = 0;
	var draw_flag = false;

	function start() {
		canvas = document.getElementById('canvas_e');
		ctx = canvas.getContext('2d');   // キャンバスからコンテキストを取得
		canvas.addEventListener('mousedown', mouse_down_func, true);  // マウスをクリックした瞬間
		canvas.addEventListener('mousemove', mouse_move_func, true);  // マウスを動かしているとき
		canvas.addEventListener('mouseup', mouse_up_func, true);      // マウスのクリックを離した瞬間
	}

	function mouse_down_func(event) {
		start_x = event.clientX - canvas.offsetLeft;
		start_y = event.clientY - canvas.offsetTop;
		ctx.clearRect(0, 0, 600, 400);
		draw_flag = true;
	}

	function mouse_move_func(event) {
		if (draw_flag) {
			end_x = event.clientX - canvas.offsetLeft;
			end_y = event.clientY - canvas.offsetTop;
			ctx.strokeStyle = "green";          //枠の色を指定
			ctx.clearRect(0, 0, 600, 400);
			ctx.strokeRect(start_x, start_y , end_x - start_x , end_y - start_y);  //枠のみの四角形を描く
		}
	}

	function mouse_up_func(event) {
		draw_flag = false;
	}
</script>
</head>
<body onload="start()">
	<canvas id="canvas_e" style="background-color:#eee;" width="600" height="400">
</body>
</html>

CodePen
↑このサイトで動作の確認ができます。HTMLのエリアに全部貼り付けて下さい。

IT系の備忘録,Javascript

Posted by パソコンの先生