Рисование прямоугольников и контуров
Используйте fillRect, strokeRect и команды контуров для рисования фигур
«Рисование прямоугольников и контуров» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Настройка холста
Для задания размеров в пикселях элемент <canvas> требует явных атрибутов width и height. Получите 2D-контекст: const ctx = canvas.getContext("2d"). Все операции рисования используют этот объект контекста.
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect и strokeRect
Рисуйте прямоугольники без контуров: ctx.fillRect(x, y, width, height) заполняет прямоугольник сплошным цветом. ctx.strokeRect(x, y, width, height) рисует его контур. Перед рисованием задайте ctx.fillStyle и ctx.strokeStyle.
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRect для стирания
ctx.clearRect(x, y, width, height) очищает пиксели, делая их прозрачными. Используйте его для стирания областей перед повторным рисованием — это необходимо для анимации: очистите холст, затем на каждом кадре заново нарисуйте всё в новых позициях.
Основы контуров
Контуры задают формы. Начните: ctx.beginPath(). Переместитесь в начальную точку: ctx.moveTo(x, y). Рисуйте линии: ctx.lineTo(x, y). Замкните контур: ctx.closePath(). Отобразите его: ctx.fill() или ctx.stroke().
Рисование линий
Треугольник: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath автоматически рисует последний сегмент обратно к начальной точке — повторять первую координату не нужно.
Дуга и окружность
ctx.arc(cx, cy, radius, startAngle, endAngle). Полная окружность: ctx.arc(100, 100, 50, 0, Math.PI * 2). Углы задаются в радианах. 0 — это правая сторона, положение на 3 часах; Math.PI — левая сторона, положение на 9 часах.
Кривые Безье
ctx.quadraticCurveTo(cpx, cpy, x, y) рисует квадратичную кривую Безье с одной управляющей точкой. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) рисует кубическую кривую Безье с двумя управляющими точками для создания плавных кривых.
Стили заливки
fillStyle принимает строки с цветами, линейные градиенты (ctx.createLinearGradient()), радиальные градиенты (ctx.createRadialGradient()) и узоры (ctx.createPattern(image, repeat)). Используйте сложные заливки, а не только сплошные цвета, чтобы создавать выразительные визуальные эффекты.
Стили линий
Управляйте видом линий с помощью ctx.lineWidth (ширина в пикселях), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") и ctx.setLineDash([5, 3]) для пунктирных линий с чередующейся длиной штрихов.
Сохранение и восстановление
ctx.save() помещает текущее состояние (fillStyle, strokeStyle, lineWidth, transform, clip) в стек. ctx.restore() извлекает его из стека. Оборачивайте сложные операции рисования в save/restore, чтобы стили не переносились между несвязанными операциями рисования.
Система координат
Начало координат холста (0,0) находится в левом верхнем углу. X увеличивается вправо, Y — вниз. Преобразования (перемещение, вращение, масштабирование) изменяют систему координат и позволяют рисовать относительно локального начала координат без ручного вычисления абсолютных позиций.
Проверка знаний
Что делает ctx.beginPath() перед рисованием контура?
Итоги
Для рисования в Canvas 2D используются методы контекста: для прямоугольников (fillRect, strokeRect), контуров (beginPath, moveTo, lineTo, arc, bezierCurveTo), стилизации (fillStyle, strokeStyle, lineWidth) и управления состоянием (save/restore). Освоив эти примитивы, Вы сможете создавать сложную графику из простых строительных блоков.
Часто задаваемые вопросы
Урок «Рисование прямоугольников и контуров» бесплатный?
Да — полный текст урока «Рисование прямоугольников и контуров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Рисование прямоугольников и контуров»?
Используйте fillRect, strokeRect и команды контуров для рисования фигур Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Рисование прямоугольников и контуров»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка canvas и двумерного контекста
- Рисование прямоугольников и контуров
- Текст и изображения на canvas
- Анимация с помощью requestAnimationFrame