Javascriptで四角い枠をドラッグして大きさを変える処理
Contents
四角い枠を表示する
以下、完成したコードです。ローカル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のエリアに全部貼り付けて下さい。
