Рисование фигур и контуров
Отображайте прямоугольники, дуги и произвольные контуры.
«Рисование фигур и контуров» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Сначала прямоугольники
Для прямоугольников есть специальные сокращённые команды: fillRect, strokeRect и clearRect. Каждая принимает аргументы (x, y, width, height).
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);Начало контура
Для любых фигур, кроме прямоугольников, нужно построить контур. Вызовите beginPath(), чтобы начать новый контур, добавьте сегменты, а затем вызовите stroke() или fill().
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo и lineTo
moveTo(x, y) поднимает перо и перемещает его, не рисуя. lineTo(x, y) проводит прямую линию от текущей точки к новой.
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();Замыкание контура
closePath() проводит линию обратно к начальной точке, завершая контур. Это удобно для многоугольников.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();Заливка фигур
fill() закрашивает внутреннюю область текущего контура с помощью fillStyle. Один и тот же контур можно и залить, и обвести.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();Рисование окружностей с помощью arc
arc(x, y, radius, startAngle, endAngle) рисует дугу окружности. Углы задаются в радианах. Полная окружность проходит от 0 до 2 * Math.PI.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();Неполные дуги и секторы
Используйте начальный и конечный углы, чтобы нарисовать сектор. Для получения сектора круга соедините дугу с центром с помощью lineTo.
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();Квадратичные кривые и кривые Безье
quadraticCurveTo(cpx, cpy, x, y) и bezierCurveTo(...) рисуют плавные кривые с помощью управляющих точек.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();Стилизация линий
Управляйте видом линий с помощью lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) и setLineDash.
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();Правила заливки
fill() принимает "nonzero" (по умолчанию) или "evenodd", чтобы определить способ заливки перекрывающихся подобластей контура — это удобно для фигур с отверстиями.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donutГрадиенты в качестве заливки
Создайте градиент с помощью createLinearGradient, добавьте цветовые переходы, а затем присвойте градиент свойству fillStyle.
const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);Быстрая проверка
Проверьте свои знания о контурах.
Повторение: фигуры и контуры
Теперь Вы умеете рисовать прямоугольники, строить контуры с помощью beginPath/moveTo/lineTo/closePath, рисовать окружности с помощью arc, добавлять кривые, стилизовать линии и выполнять заливку цветами или градиентами. Далее — изображения и текст.
Часто задаваемые вопросы
Урок «Рисование фигур и контуров» бесплатный?
Да — полный текст урока «Рисование фигур и контуров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Рисование фигур и контуров»?
Отображайте прямоугольники, дуги и произвольные контуры. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Рисование фигур и контуров»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка контекста Canvas
- Рисование фигур и контуров
- Работа с изображениями и текстом
- Анимация с requestAnimationFrame