Работа с Canvas [Модуль 11: Работа с медиа-элементами]: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

id: 37082_canvas-get-context-fill

Найдите элемент 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`).

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-draw-rect

На холсте '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)` для рисования прямоугольника с нужными координатами и размерами.

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-stroke-rect

Нарисуйте контур (не залитый) зеленого прямоугольника на холсте '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)` для рисования контура.

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-draw-line

Нарисуйте синюю диагональную линию на холсте '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()`.

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-draw-circle

Нарисуйте желтую залитую окружность на холсте '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()`.

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

Результат

Лог

Выполнить

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

Вывод текста

id: 37082_canvas-draw-text

Напишите текст '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)` для отображения текста.

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-draw-image

Загрузите изображение '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)` для рисования изображения.

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

Результат

Лог

Выполнить

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

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

id: 37082_canvas-linear-gradient

Нарисуйте прямоугольник на холсте '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`.

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

Результат

Лог

Выполнить

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