Введение в мир Canvas
Canvas — это удивительный инструмент HTML5, который позволяет нам рисовать прямо в браузере с помощью JavaScript. Представьте, что у вас есть цифровой холст, на котором вы можете создавать любые изображения, анимации и даже игры! Давайте вместе сделаем первые шаги в этом увлекательном мире.
Создаем наш первый Canvas
Прежде чем мы начнем рисовать, нам нужно создать сам холст. Это делается очень просто:
- Откройте ваш HTML-файл.
- Внутри тега
<body>добавьте следующую строку:
<canvas id="myCanvas" width="500" height="300"></canvas>
Здесь мы создали элемент canvas шириной 500 пикселей и высотой 300 пикселей. Атрибут id="myCanvas" нужен, чтобы мы могли легко найти наш холст с помощью JavaScript.
Подготовка к рисованию
Теперь, когда у нас есть холст, давайте подготовимся к рисованию:
- В вашем JavaScript-файле (или внутри тега
<script>) добавьте следующий код:
// Находим наш холст
const canvas = document.getElementById('myCanvas');
// Получаем контекст для рисования
const ctx = canvas.getContext('2d');
- Мы находим наш холст по id, который задали в HTML.
- Затем получаем «контекст» для рисования. Думайте о нем как о наборе инструментов художника.
Рисуем наш первый прямоугольник
Давайте нарисуем простой синий прямоугольник:
// Выбираем цвет заливки
ctx.fillStyle = 'blue';
// Рисуем прямоугольник
ctx.fillRect(10, 10, 100, 50);
Разберем этот код:
fillStyle = 'blue'— мы выбираем синий цвет для заливки.fillRect(10, 10, 100, 50)— рисуем заполненный прямоугольник:- 10, 10 — координаты верхнего левого угла (x, y)
- 100 — ширина прямоугольника
- 50 — высота прямоугольника
Попробуйте изменить числа и цвет, чтобы увидеть, как меняется результат!
Рисуем контур прямоугольника
А теперь давайте нарисуем прямоугольник с контуром:
// Выбираем цвет контура
ctx.strokeStyle = 'red';
// Устанавливаем толщину линии
ctx.lineWidth = 3;
// Рисуем контур прямоугольника
ctx.strokeRect(130, 10, 100, 50);
Здесь мы использовали:
strokeStyle = 'red'— выбор красного цвета для контура.lineWidth = 3— установка толщины линии в 3 пикселя.strokeRect(130, 10, 100, 50)— рисование контура прямоугольника.
Рисуем линии
Теперь давайте нарисуем простую линию:
// Начинаем новый путь
ctx.beginPath();
// Перемещаем "карандаш" в начальную точку
ctx.moveTo(50, 100);
// Рисуем линию до конечной точки
ctx.lineTo(200, 100);
// Устанавливаем цвет линии
ctx.strokeStyle = 'green';
// Рисуем линию
ctx.stroke();
Этот код:
- Начинает новый путь с
beginPath(). - Перемещает «карандаш» в точку (50, 100).
- Рисует линию до точки (200, 100).
- Устанавливает зеленый цвет для линии.
- Отображает линию на холсте с помощью
stroke().
Рисуем круг
Рисование круга немного сложнее, но мы справимся:
// Начинаем новый путь
ctx.beginPath();
// Рисуем круг
ctx.arc(300, 150, 50, 0, 2 * Math.PI);
// Выбираем цвет заливки
ctx.fillStyle = 'orange';
// Заливаем круг
ctx.fill();
Разберем метод arc():
- 300, 150 — координаты центра круга (x, y)
- 50 — радиус круга
- 0 — начальный угол (в радианах)
- 2 * Math.PI — конечный угол (полный круг)
Добавляем текст
Давайте добавим немного текста на наш холст:
// Устанавливаем шрифт
ctx.font = '30px Arial';
// Выбираем цвет текста
ctx.fillStyle = 'purple';
// Рисуем текст
ctx.fillText('Привет, Canvas!', 150, 250);
- Устанавливаем шрифт и его размер.
- Выбираем цвет для текста.
- Рисуем текст, указывая сам текст и координаты (150, 250), где он должен начинаться.
Простая анимация
Наконец, давайте создадим простую анимацию — движущийся квадрат:
let x = 0;
function animate() {
// Очищаем холст
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Рисуем квадрат
ctx.fillStyle = 'blue';
ctx.fillRect(x, 100, 50, 50);
// Изменяем позицию
x += 2;
// Если квадрат ушел за пределы холста, возвращаем его в начало
if (x > canvas.width) {
x = -50;
}
// Запрашиваем следующий кадр анимации
requestAnimationFrame(animate);
}
// Запускаем анимацию
animate();
Этот код:
- Создает переменную
xдля отслеживания позиции квадрата. - Определяет функцию
animate(), которая:
- Очищает холст
- Рисует синий квадрат
- Увеличивает
xна 2 (движение вправо) - Проверяет, не ушел ли квадрат за пределы холста
- Запрашивает следующий кадр анимации
- Запускает анимацию вызовом
animate().
Заключение
Вот и все! Теперь вы знаете основы рисования на Canvas с помощью JavaScript. Мы научились создавать холст, рисовать фигуры, линии, добавлять текст и даже создали простую анимацию.
Не бойтесь экспериментировать! Попробуйте изменить цвета, размеры, добавить новые фигуры или создать более сложную анимацию. С практикой вы сможете создавать удивительные вещи на Canvas.
Помните, что это только начало вашего путешествия в мир Canvas. Существует еще много интересных техник и возможностей, которые вы можете изучить. Продолжайте практиковаться, и вскоре вы сможете создавать сложные графические приложения и игры прямо в браузере!
