<!DOCTYPE html>
<html>
<body >
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;" onmousedown="myclick(event)">
</canvas>
<div style="position:absolute;left:600px;top:10px;">
Координаты прямоугольных областей
</div>
<select style="position:absolute;left:600px;top:30px;" id="mycoords">
<option selected value="">Значение координат</option>
</select>
<br>
Координата X1<input type="text" id="val_1">
<br>
Координата Y1<input type="text" id="val_2">
<br>
Координата X2<input type="text" id="val_3">
<br>
Координата Y2<input type="text" id="val_4">
<br>
<input type="button" value="нарисовать прямоугольник" onclick="drawrect(event)">
<script>
let state = 0;
let x1 = 0;
let y1 = 0;
let x2 = 0;
let y2 = 0;
let count = 1;
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
function myclick(event){
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
if (state == 0)
{
state = 1;
let val_1 = document.getElementById("val_1");
val_1.value=String(x);
let val_2 = document.getElementById("val_2");
val_2.value=String(y);
x1 = Number(val_1.value);
y1 = Number(val_2.value);
ctx.fillRect(x,y,10,10);
}
else{
let val_3 = document.getElementById("val_3");
val_3.value=String(x);
let val_4 = document.getElementById("val_4");
val_4.value=String(y);
state = 0;
x2 = Number(val_3.value);
y2 = Number(val_4.value);
ctx.beginPath();
ctx.fillRect(x1,y1,x2-x1,y2-y1);
add_xy();
}
}
function drawrect(event){
let val_1 = document.getElementById("val_1");
let val_2 = document.getElementById("val_2");
let val_3 = document.getElementById("val_3");
let val_4 = document.getElementById("val_4");
ctx.fillRect(val_1.value,val_2.value,val_3.value-val_1.value,val_4.value-val_2.value);
add_xy();
}
function add_xy(){
let selectElement = document.getElementById('mycoords');
let xy = "№" +count + ": "+ "x1="+ x1 + " y1="+ y1 + " x2=" + x2 + " y2=" + y2;
selectElement.add(new Option(xy));
selectElement.value = xy;
count = count +1;
}
</script>
</body>
</html>
| 