Для решения задачи создадим функцию, которая будет рисовать квадрат, принимая в качестве параметров размер стороны, цвет и, опционально, цвет заливки. Толщина пера будет фиксированной — 2 пикселя.
function drawSquare(sideLength, strokeColor, fillColor = null) {
const penWidth = 2;
const canvas = document.getElementById('myCanvas'); // Предполагается, что у вас есть canvas с id 'myCanvas'
const ctx = canvas.getContext('2d');
ctx.lineWidth = penWidth;
ctx.strokeStyle = strokeColor;
// Вычисляем координаты для центрирования квадрата относительно заданных координат
const x = -50; // Начальная точка по X
const y = -50; // Начальная точка по Y
// Рисуем квадрат
ctx.strokeRect(x, y, sideLength, sideLength);
// Если указан цвет заливки, заливаем квадрат
if (fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(x, y, sideLength, sideLength);
}
}
Теперь вызовем эту функцию для рисования последовательности квадратов:
// Перед рисованием очистим холст (если нужно)
document.getElementById('myCanvas').getContext('2d').clearRect(0, 0, document.getElementById('myCanvas').width, document.getElementById('myCanvas').height);
// Рисуем квадраты от самого большого к самому маленькому
drawSquare(200, 'black'); // 1-й квадрат
drawSquare(150, 'black', 'white'); // 2-й квадрат
drawSquare(100, 'black', 'lavender'); // 3-й квадрат
drawSquare(50, 'black', 'black'); // 4-й квадрат
// После отрисовки убери исполнителя с экрана (если он есть на холсте)
// Например, если исполнитель — это объект, его можно удалить или скрыть:
// removeArtist();
Примечание: Код для отрисовки будет работать в среде, где доступен HTML5 Canvas API (например, в веб-браузере). Координаты (-50,-50) используются как верхний левый угол квадрата. Цвет "lavender" может потребовать определения или использования стандартного названия цвета.