<!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);
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);
}
//ctx.fillRect(i,i2-i, 99, 99);
}
}
}
</script>
</body>
</html>
| 