Работа с Canvas: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

Этот набор заданий посвящен работе с элементом `<canvas>` в HTML с использованием JavaScript. Вы научитесь получать контекст рисования, задавать цвета и стили, рисовать простые фигуры (прямоугольники, линии, круги), выводить текст и изображения на холст. Задания построены по принципу 'от простого к сложному' и помогут закрепить навыки работы с Canvas API. Вам будет предоставлен готовый HTML и частично написанный JavaScript код, который нужно будет дополнить.

Список тем

Получение контекста и заливка фона

Найдите элемент canvas на странице по его ID 'myCanvas'. Получите 2D контекст для рисования. Установите цвет заливки на 'lightblue' и залейте весь холст этим цветом, используя размеры холста.

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.input__1("myCanvas");
const ctx = canvas.input__2("2d");

ctx.input__3 = "lightblue";
ctx.input__4(0, 0, canvas.width, canvas.height);

                     const canvas = document.input__1("myCanvas");
const ctx = canvas.input__2("2d");

ctx.input__3 = "lightblue";
ctx.input__4(0, 0, canvas.width, canvas.height);

Используйте метод `getElementById` для получения элемента canvas. Затем вызовите метод `getContext('2d')` у элемента canvas. Установите свойство `fillStyle` контекста. Используйте метод `fillRect` с координатами (0, 0) и шириной/высотой canvas (`canvas.width`, `canvas.height`).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Рисование прямоугольника

На холсте 'myCanvas' нарисуйте красный прямоугольник. Задайте цвет заливки 'red'. Прямоугольник должен начинаться в точке (50, 50) и иметь ширину 100 и высоту 80 пикселей.

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "red";
ctx.input__2(50, 50, 100, 80);

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "red";
ctx.input__2(50, 50, 100, 80);

Сначала получите элемент canvas и его 2D контекст. Установите свойство `fillStyle` в 'red'. Затем используйте метод `fillRect(x, y, width, height)` для рисования прямоугольника с нужными координатами и размерами.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Рисование контура прямоугольника

Нарисуйте контур (не залитый) зеленого прямоугольника на холсте 'myCanvas'. Установите цвет контура 'green' и толщину линии 3 пикселя. Прямоугольник должен начинаться в точке (20, 30), иметь ширину 150 и высоту 100.

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "green";
ctx.input__2 = 3;
ctx.input__3(20, 30, 150, 100);

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "green";
ctx.input__2 = 3;
ctx.input__3(20, 30, 150, 100);

Получите контекст холста. Установите свойство `strokeStyle` для цвета контура и `lineWidth` для толщины линии. Используйте метод `strokeRect(x, y, width, height)` для рисования контура.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Рисование линии

Нарисуйте синюю диагональную линию на холсте 'myCanvas'. Линия должна начинаться в точке (50, 50) и заканчиваться в точке (250, 250). Установите цвет линии 'blue' и толщину 5 пикселей.

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1(); // Начать путь
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.input__2(50, 50); // Начальная точка
ctx.input__3(250, 250); // Конечная точка
ctx.input__4(); // Отобразить линию

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1(); // Начать путь
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.input__2(50, 50); // Начальная точка
ctx.input__3(250, 250); // Конечная точка
ctx.input__4(); // Отобразить линию

Получите контекст. Начните новый путь с помощью `beginPath()`. Установите цвет (`strokeStyle`) и толщину (`lineWidth`). Переместите 'перо' в начальную точку с помощью `moveTo(x, y)`. Нарисуйте линию до конечной точки с помощью `lineTo(x, y)`. Отобразите линию на холсте с помощью `stroke()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Рисование окружности

Нарисуйте желтую залитую окружность на холсте 'myCanvas'. Центр окружности должен быть в точке (150, 150), радиус - 70 пикселей. Установите цвет заливки 'yellow'.

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1(); // Начать путь
ctx.fillStyle = "yellow";
ctx.input__2(150, 150, 70, 0, input__3 * 2); // Описать дугу/окружность
ctx.input__4(); // Залить путь

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1(); // Начать путь
ctx.fillStyle = "yellow";
ctx.input__2(150, 150, 70, 0, input__3 * 2); // Описать дугу/окружность
ctx.input__4(); // Залить путь

Получите контекст. Начните новый путь (`beginPath`). Используйте метод `arc(x, y, radius, startAngle, endAngle)` для создания дуги. Для полной окружности начальный угол 0, конечный угол `Math.PI * 2`. Установите цвет заливки (`fillStyle`). Залейте созданный путь с помощью `fill()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вывод текста

Напишите текст 'Hello Canvas!' на холсте 'myCanvas'. Используйте шрифт '30px Arial', цвет текста 'purple'. Текст должен начинаться в точке (50, 100).

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "30px Arial";
ctx.input__2 = "purple";
ctx.input__3("Hello Canvas!", 50, 100);

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.input__1 = "30px Arial";
ctx.input__2 = "purple";
ctx.input__3("Hello Canvas!", 50, 100);

Получите контекст. Установите свойства шрифта с помощью `font`. Установите цвет текста с помощью `fillStyle`. Используйте метод `fillText(text, x, y)` для отображения текста.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Рисование изображения

Загрузите изображение 'https://naytikurs.ru/img/7.png' и нарисуйте его на холсте 'myCanvas' в точке (10, 10).

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const img = new input__1();
img.src = "https://naytikurs.ru/img/7.png";

img.input__2 = function() {
  ctx.input__3(img, 10, 10);
};

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const img = new input__1();
img.src = "https://naytikurs.ru/img/7.png";

img.input__2 = function() {
  ctx.input__3(img, 10, 10);
};

Создайте новый объект `Image`. Установите его свойство `src`. Используйте обработчик события `onload`, чтобы убедиться, что изображение загружено перед рисованием. Внутри обработчика `onload` получите контекст холста и используйте метод `drawImage(image, x, y)` для рисования изображения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Использование линейного градиента

Нарисуйте прямоугольник на холсте 'myCanvas', залитый линейным градиентом. Градиент должен идти слева направо (от x=50 до x=250), начинаться с красного цвета ('red') и заканчиваться синим ('blue'). Прямоугольник должен занимать область от (50, 50) до (250, 200).

CSS

canvas {
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <canvas id="myCanvas" width="300" height="300"></canvas>

<canvas id="myCanvas" width="300" height="300"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Создание градиента (от 50,0 до 250,0)
const gradient = ctx.input__1(50, 0, 250, 0);

// Добавление цветов
gradient.input__2(0, "red"); // Начальный цвет
gradient.input__2(1, "blue"); // Конечный цвет

// Применение градиента и рисование прямоугольника
ctx.input__3 = gradient;
ctx.fillRect(50, 50, 200, 150); // x, y, width, height

                     const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Создание градиента (от 50,0 до 250,0)
const gradient = ctx.input__1(50, 0, 250, 0);

// Добавление цветов
gradient.input__2(0, "red"); // Начальный цвет
gradient.input__2(1, "blue"); // Конечный цвет

// Применение градиента и рисование прямоугольника
ctx.input__3 = gradient;
ctx.fillRect(50, 50, 200, 150); // x, y, width, height

Получите контекст. Создайте объект линейного градиента с помощью `createLinearGradient(x0, y0, x1, y1)`, где (x0, y0) - начальная точка градиента, (x1, y1) - конечная. Добавьте цветовые остановки с помощью `addColorStop(offset, color)`, где offset - число от 0 до 1. Установите созданный градиент как `fillStyle`. Нарисуйте прямоугольник с помощью `fillRect`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку