Как сделать круги при нажатии мыши?

Чтобы сделать круги при нажатии мыши на веб-странице, можно воспользоваться языком программирования JavaScript. Для начала, создадим HTML файл с областью, где будем рисовать круги.

<!DOCTYPE html>

<html>


<head>


<title>Рисование кругов при нажатии мыши</title>


<style>


#canvas {


border: 1px solid black;


}


</style>


</head>


<body>


<canvas id="canvas" width="500" height="500"></canvas>


<script>


const canvas = document.getElementById('canvas');


const ctx = canvas.getContext('2d');


canvas.addEventListener('mousedown', function(event) {


const mouseX = event.offsetX;


const mouseY = event.offsetY;


const radius = 20;


ctx.beginPath();


ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);


ctx.fillStyle = 'blue';


ctx.fill();


ctx.closePath();


});


</script>


</body>


</html>

В этом примере при каждом нажатии кнопки мыши на области canvas (холст) будет рисоваться круг с радиусом 20 пикселей по координатам, где было произведено нажатие. Мы используем методы рисования круга через объект ctx (контекст холста).

Таким образом, используя JavaScript и элемент canvas, можно легко создать интерактивную веб-страницу, на которой будут появляться круги при нажатии мыши.