В этой статье рассмотрим основы canvas, а точнее создания фигур, от обычных квадратов, до рисования линий и кругов.
Рисуем обычную фигуру:
Для начала надо создать HTML элемент canvas, пишем код который ниже.
1 | <canvas class="canvas" id="canvas" width="300" height="200"></canvas> |
В элементе canvas мы и будем рисовать фигуры, атрибуты width и height, нужны чтобы задать размер, иначе ширина и высота будут равны нулю и мы не чего там не увидим, по атрибуту id, будем получать сам элемент в JavaScript.
Canvas в JavaScript:
Алгоритм рисования фигуры очень простой, берём canvas элемент, и рисуем в нем фигуру, вот как рисовать квадрат.
1 2 3 4 5 6 7 8 9 | // Получаем элемент canvas let canvas = document.getElementById("canvas"); // Назначаем тип рисования let ctx = canvas.getContext('2d'); // Назначаем цвет рисования ctx.fillStyle = "red"; // Рисуем квадрат ctx.fillRect(100, 50, 100, 100); |
Вот что получилось.
Теперь рассмотрим одну функцию по подробнее, это функция getContext('2d'), она делает контекст для рисования, то есть в нашем случае будем рисовать 2d графику, также можно работать и с 3d графикой, но об этом в другой раз.
базовые функции для рисования квадрата:
- fillStyle — Назначает цвет для заливки;
- strokeStyle — Назначает цвет для контуров или линий;
- fillRect(x, y, width, height) — Создаёт квадрат или прямоугольник с заливкой;
- strokeRect(x, y, width, height) — Создаёт квадрат или прямоугольник без заливки, то есть контуры;
- clearRect(x, y, width, height) — стирает область заданную в параметрах;
Давайте подробнее рассмотрим параметры функций, если с width и height всё понятно, это ширина и высота прямоугольника соответственно, а вот с x и y не всё так однозначно как хотелось бы, в том дело, что расчёт ведётся не так как мы привыкли в математики, там наоборот y идёт с верху вниз, x с лева на права, думаю схема которая нарисована ниже поможет в этом разобратся.
Эта схема может не много кривая, но суть на мой взгляд ясна, но надо сказать что «px» не надо писать, когда задаёте параметр, задаёте просто число.
Рисуем линии:
Для линий точно также создаём элемент canvas.
Сanvas линии в JavaScript:
Алгоритм рисования линий таков, берём первую позицию и рисуем линии до второй позиции.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.fillStyle = "green"; ctx.beginPath(); ctx.moveTo(50, 70); ctx.lineTo(100, 20); ctx.lineTo(150, 70); ctx.fill(); ctx.moveTo(50, 80); ctx.lineTo(150, 80); ctx.lineTo(100, 130); ctx.closePath() ctx.stroke(); |
Вот что получилось.
Рассмотрим функции, которые могут пригодится для создания линий и своих фигур, например, треугольник.
- beginPath() — Создаёт новый путь;
- moveTo(x, y) — Добавляет начальную позицию пути;
- lineTo(x, y) — Следующая позиция, можно использовать после moveTo и после lineTo;
- fill() — Заливает фигуру, цветом заданным fillStyle;
- stroke() — Добавляет линиям цвет загаданный strokeStyle, иначе их не будет видно или если не задан, то делает их чёрными;
- closePath() — Делает линию между первоначальной позицию и последней позицией;
Это все базовые функции которые вам пригодятся для работы с линиями в canvas.
Рисуем круги:
С кругами всё точно также, как и с линиями, только одна функция отличается.
1 2 3 4 5 6 7 8 9 10 11 | let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI*2, true); ctx.fill(); ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); ctx.closePath() ctx.stroke(); |
Вот что получилось.
Как видите единственное что отличается от линий, это функция arc(), которая рисует дуги, рассмотрим её по подробнее.
arc(x, y, radius, startAngle, endAngle, anticlockwise):
- x и y — С этими параметрами всё понятно, это позиция центра окружности:
- radius — Это просто радиус;
- startAngle — Угол начала дуги, измеряется по часовой стрелке от положительной оси Х, выражается в радианах;
- endAngle — Угол завершения дуги, всё остальное точно также как у параметра srartAngle;
- anticlockwise — Задаёт направление рисования дуги. Если true — против часовой, false — по часовой;
Вот как то так работать с дугами.
Вывод:
Здесь было показано основы работы с canvas, а точнее работа с прямоугольниками, линиями и дугами, надеюсь вам было это полезно, ещё скачайте файл, в нём будет код из статьи.
Если вы всё поняли в этой статье и готовы продолжать дальше учить Canvas, то прочитайте это: Canvas анимация на JavaScript, простыми словами и без воды.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,25
Загрузка...