<!DOCTYPE html>
<html>
<body onload="press(event)">
<canvas id="myCanvas" width="400" height="400" style="border:1px solid
#d3d3d3;" onclick="press(event)">
</canvas>
<div id="mytext"> </div>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let color_1 = '#' + Math.floor(Math.random()*16777215).toString(16);
let color_2 = '#' + Math.floor(Math.random()*16777215).toString(16);
var objs = ['1', '2','3','4','5','6','7','8'];
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function press(event){
ctx.clearRect(0,0,400,400);
ctx.beginPath();
for (let y = 0; y <= 400; y += 50) {
for (let x = 0; x <= 400; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
}
ctx.stroke();
}
for (let x = 0;x <= 400;x+=50){
ctx.fillStyle = color_1;
ctx.fillRect(x,50, 49, 49);
}
for (let x = 0;x <= 400;x+=50){
ctx.fillStyle = color_2;
ctx.fillRect(x,300, 49, 49);
}
for (let y = 0;y <= 400;y+=50){
for (let x = 0;x <= 400;x+=50){
if ((x >= event.pageX-10 && x <= event.pageX+40) && (y >= event.pageY-10
&& y <= event.pageY+40))
{
ctx.fillStyle = color_1;
ctx.fillRect(x-50,y-50, 49, 49);
//if (x == 50 && y == 100) alert("первый объект");
//if (x == 100 && y == 100) alert("второй объект");
//if (x == 150 && y == 100) alert("третий объект");
//if (x == 200 && y == 100) alert("четвертый объект");
//if (x == 250 && y == 100) alert("пятый объект");
//if (x == 300 && y == 100) alert("шестой объект");
//if (x == 350 && y == 100) alert("седьмой объект");
//if (x == 400 && y == 100) alert("восьмой объект");
if (y == 100){
alert("выделен "+objs[x/50-1]+" объект");
}
if (y == 350){
alert("выделен "+objs[x/50-1]+" объект");
}
let elem = document.getElementById("mytext");
elem.innerHTML = x + " " + y;
}
//ctx.fillRect(i,i2-i, 99, 99);
}
}
}
</script>
</body>
</html>
| 