HTML Canvas
Ранее SVG ставил чёткие иконки как векторную разметку или файл .svg. Этот урок знакомит с canvas: пустой битмап-коробкой, которую красит JavaScript. HTML только размещает и задаёт размер; скрипты рисуют пиксели. Практика — элемент + крошечный 2D-рисунок — не полный курс Canvas API, игр или WebGL.
Зачем canvas в курсе HTML
Новички встречают canvas в графиках и мини-играх. Разделение помогает: HTML владеет элементом; JS — пикселями. После SVG canvas показывает другой обычный инструмент. Здесь хватает getContext("2d") и fillRect.
Прямой ответ
1) Добавьте canvas с id, width, height и запасным текстом. 2) В JS getContext("2d"). 3) Рисуйте fillStyle + fillRect. 4) Атрибуты задают разрешение битмапа. 5) SVG для иконок; canvas для динамических пикселей. 6) Только интро.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Крошечный элемент canvas
Без скрипта canvas — пустой прямоугольник. HTML объявляет размер и id, чтобы скрипт нашёл его.
Canvas shell with fallback
html<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>Читаем оболочку
- canvas создаёт поверхность
- width/height задают битмап
- id позволяет выбрать элемент
- текст между тегами — запасной
- только CSS может растянуть и размыть
- в отличие от SVG нет дочерних фигур в HTML
Рисуем прямоугольник 2D-контекстом
Короткий скрипт красит. getContext("2d") возвращает 2D API; fillRect заливает прямоугольник.
Canvas plus fillRect
html<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>Читаем вызовы рисования
- getElementById находит canvas
- getContext("2d") открывает API
- fillStyle задаёт цвет
- fillRect заливает прямоугольник
- без скрипта только запасной текст
- дальше: web storage
Выбор canvas vs SVG
- Статичный чёткий логотип: SVG
- Часто обновляемые пиксели: canvas
- Фигуры как DOM: часто SVG
- Думать областью пикселей: canvas
- Простой значок: обычно SVG
- WebGL/игры: за пределами этого интро
Практика — canvas на странице
- Вставьте оболочку.
- Добавьте скрипт; проверьте прямоугольник.
- Меняйте цвет/числа.
- Временно уберите скрипт.
- Тяните только CSS — возможное размытие.
- Предложение: canvas — JS-битмап; SVG — векторная разметка.
- Впереди: web storage.
Лёгкие ошибки
- Ждать фигуры только от HTML
- Забыть запасной текст
- Использовать canvas для логотипов вместо SVG
- Путать canvas с SVG
- Менять только CSS-размер
- Считать интро полным курсом Canvas
- Оставлять значимый canvas без имени
Итог
- canvas — пустая битмап-поверхность
- JavaScript рисует через getContext("2d") и fillRect
- SVG для иконок; canvas для динамических пикселей
- Запасной текст помогает без рисования
- SVG был вектором; здесь пиксели скриптом
- Далее: HTML web storage
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху