Невозможно нарисовать пиксель или овальный круг с помощью JavaScript. ⇐ CSS

[Anonymous]

Я пытаюсь нарисовать пиксельный круг, но мне нужна помощь с несколькими проблемами:
[*]Если ширина и высота сетки не равны, она должна нарисовать овал, но это не так, и по краю сетки остаются пустые ячейки. [*]Если я увеличу размер до большего числа, он заполнит весь экран и за его пределами, поэтому просто интересно, можно ли ограничить его фиксированным размером сетки.
document.addEventListener("DOMContentLoaded", function() { // Получаем элемент контейнера сетки и элементы ввода constgridContainer = document.getElementById("grid-container"); const widthInput = document.getElementById("ширина"); const heightInput = document.getElementById("высота"); // Функция для создания макета сетки функция генерироватьGridLayout (ширина, высота) { // Очищаем любую существующую сетку GridContainer.innerHTML = ""; // Устанавливаем столбцы-шаблона сетки-контейнера на основе ширины GridContainer.style.gridTemplateColumns = `repeat(${width}, 24px)`; // Создаем блоки сетки for (пусть я = 0; я { const center = { x: Block.offsetLeft + 12, y: Block.offsetTop + 12 }; const distance = Math.sqrt(Math.pow(center.x - centerX, 2) + Math.pow(center.y - centerY, 2)); if (расстояние < радиус && расстояние > радиус - 24) { block.style.backgroundColor = "#FF0000"; // Измените это на желаемый цвет } }); console.log(`Центр сетки: (${centerX/24}, ${centerY/24})`); console.log(`Радиус круга: ${radius}`); } // Прослушиватель событий для изменения входной ширины widthInput.addEventListener("input", function() { const newWidth = parseInt(widthInput.value, 10); const currentHeight = parseInt(heightInput.value, 10); генерироватьGridLayout (newWidth, currentHeight); }); // Прослушиватель событий для изменения входных данных высоты heightInput.addEventListener("input", function() { const currentWidth = parseInt(widthInput.value, 10); const newHeight = parseInt(heightInput.value, 10); генерироватьGridLayout (currentWidth, newHeight); }); // Генерируем макет сетки со значениями по умолчанию const defaultWidth = parseInt(widthInput.value, 10); const defaultHeight = parseInt(heightInput.value, 10); генерироватьGridLayout (defaultWidth, defaultHeight); }); #grid-container { дисплей: сетка; Grid-template-columns: повторение (автозаполнение, 24 пикселя); /*пробел: 0,5 пикселей;*/ положение: относительное; } .grid-блок { ширина: 24 пикселей; высота: 24 пикселей; цвет фона: прозрачный; граница: 1 пиксель, сплошная #ddd; плыть налево; } .grid-овал { позиция: абсолютная; граница: 1 пиксель, сплошная красная; радиус границы: 50%; события указателя: нет; } .grid-center-dot { ширина: 10 пикселей; высота: 10 пикселей; цвет фона: синий; радиус границы: 50%; позиция: абсолютная; трансформировать: транслировать(-50%, -50%); Ширина: Высота: Толщина: Масштаб: Загрузить в формате PNG Загрузить в формате JPG Загрузить в формате SVG