Вопрос:

1) Определи функцию, рисующую квадрат с заданной стороной. Толщина пера - 2 пикселя. По желанию, заливку тоже можно включить в эту функцию. 2) Нарисуй последовательность квадратов от самого большого к самому маленькому. Начни рисовать с точки (-50,-50). Описание квадратов: 1-й квадрат. Размер стороны — 200, цвет — чёрный. 2-й квадрат. Размер стороны — 150, цвет — белый ("white"). 3-й квадрат. Размер стороны — 100, цвет — лавандовый ("lavender"). 4-й квадрат. Размер стороны — 50, цвет — чёрный ("black"). После отрисовки убери исполнителя с экрана.

Ответ:

Решение:

Для решения задачи создадим функцию, которая будет рисовать квадрат, принимая в качестве параметров размер стороны, цвет и, опционально, цвет заливки. Толщина пера будет фиксированной — 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" может потребовать определения или использования стандартного названия цвета.