Использовать canvas не очень сложно, приветствуется если у вас есть понимание HTML и JavaScript.
Предварительная «настройка» нашего холста.Сanvas с английского переводится как холст. <canvas> пожалуй самое интересное в HTML5 так как он предназначен для создания графики при помощи скриптования.
Посмотрим на сам элемент <canvas>
<canvas id="tutorial" width="150" height="150"></canvas>
Элемент <canvas> имеет всего два атрибута - width и height. Оба они не обязательны, если ширина и высота не определены, canvas будет создан шириной в 300 пикселей и 150 пикселей высотой. Размер элемента может быть произвольным и задаваться через CSS. Перед тем как приступить непосредственно к рисованию, давайте заготовим минимальный шаблон. Для этого откроем любой текстовый редактор, скопируем код, приведенный ниже и сохраним его с расширение ( .html ).
<html> <head> <title>canvasExample</title> <style> #example { border: 1px #000 solid; } </style> </head> <body> <canvas height='320' width='480' id='example'>Обновите браузер</canvas> <script> var example = document.getElementById("example"); var ctx = example.getContext('2d'); </script> </body> </html>
Теперь можете открыть сохраненный файл в браузере и полюбоваться на результат. По умолчанию поле для рисования белого цвета, что бы наш <canvas> не сливался была добавлена добавлена черная обводка. Ближе к делу.
Я думаю вы уже поняли из заголовка урока, что рисовать мы будем не стандартными методами, а с использованием библиотеки Fabric.js.
Проблема в том, что родной canvas API ужасно низко-уровневый. Одно дело если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур. Дело в том, что обычные canvas методы позволяют нам вызывать только очень простые графические комманды, вслепую меняя целый битмап холста <canvas>. Нужно нарисовать прямоугольник? Используем fillRect(left, top, width, height). Нарисовать линию? Используем комбинацию moveTo(left, top) и lineTo(x, y). Как будто рисуем кисточкой по холсту, накладывая всё больше и больше краски, почти без какого-либо контроля. Fabric.js включает в себя обектную модель, которой так не хватает при работе с <canvas>, а так же SVG парсер, интерактивный слой и множество других, незаменимых инструментов.
Скачайте последнюю версию Fabric.js и положите рядом с вашим файлом. Теперь немного изменим наш шаблон.
<html> <head> <title>canvasExample</title> <style> #example { border: 1px #000 solid; } </style> <meta charset="utf-8"/> <!-- подключаем скачанный Fabric.js --> <script src="min.js"></script> </head> <body> <canvas height='320' width='480' id='example'>Обновите браузер</canvas> <script> // создаем "оболочку" вокруг canvas элемента (id="example") var example = new fabric.Canvas('example'); </script> </body> </html>
Давайте изобразим прямоугольник. Все очень просто, создадим переменную rect и после строки
var canvas = new fabric.Canvas('example');
var rect = new fabric.Rect({ left: 100, top: 100, fill: '#000', width: 100, height: 60 }); // добавляем прямоугольник, чтобы он отобразился example.add(rect);
результат: #example, #example1 { border: 1px #000 solid; }
var example = document.getElementById("example"); var ctx = example.getContext('2d'); ctx.fillStyle = '#000'; // меняем цвет клеток ctx.fillRect(100, 100, 100, 60);
Рисовать прямоугольник — это конечно не серьёзно. Давайте хоть сделаем с ним что-нибудь интересное. Например, повернем на 45 градусов.
var canvas = new fabric.Canvas('c'); // создаём прямоугольник с углом в 45 градусов var rect = new fabric.Rect({ left: 100, top: 100, fill: '#000', width: 100, height: 60, //просто добавим параметр angle и все готово angle: 45 }); example.add(rect);
пример:
var example = document.getElementById("example1"); var ctx = example.getContext('2d'); ctx.fillStyle = '#000'; // меняем цвет клеток ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-50, -30, 100, 60);
Используя Fabric, всё что надо было сделать, это поменять значение угла на 45. А вот с обычными методами всё не так-то просто. Во первых, мы не можем управлять объектами напрямую. Вместо этого, приходится менять позицию и угол самого битмапа (без Fabric ctx.translate, ctx.rotate). Потом рисуем прямоугольник, при этом не забывая отодвинуть битмап соответственно (-50, -30), так, чтобы прямоугольник появился на 100,100. Ещё надо не забыть перевести угол из градусов в радианы при повороте битмапа.
Теперь вам, наверное, становится понятно зачем существует Fabric.
Объекты.Мы уже видели как работать с прямоугольниками, используя fabric.Rect конструктор. Но, конечно же, Fabric предоставляет многие другие простые фигуры: круги, треугольники, эллипсы и т.д. Все они доступны из fabric объектов, соответственно, fabric.Circle, fabric.Triangle, fabric.Ellipse и т.д.
7 базовых фигур доступных в Fabric:
Нужно нарисовать круг, треугольник? Просто создаём соответствующий объект и добавляем его на холст. Тоже самое с другими формами:
//круг var circle = new fabric.Circle({ radius: 20, fill: '#D5002C', left: 100, top: 100 }); //треугольник var triangle = new fabric.Triangle({ width: 20, height: 30, fill: '#FBBA1E', left: 50, top: 50 }); example.add(circle, triangle);
Создание визуальных фигур — это очень просто. В какой-то момент наверняка понадобится их менять. Возможно, какие-то действия пользователя должны сказываться на состоянии картинки (холста), или должна быть запущена анимация. Или же нужно поменять атрибуты объектов (цвет, прозрачность, размер, позицию) в зависимости от движений мышки.
Fabric берёт на себя заботу о состоянии холста и перерисовке. От нас требуется только менять сами объекты.
Что бы подвинуть объект используйте метод set:
//меняем положение круга circle .set({ left: 20, top: 50 }); //перерисовать объекты example.renderAll()
Во первых, есть атрибуты, меняющие позицию — left, top; размер — width, height; сам рендеринг (отображение объекта) — fill, opacity, stroke, strokeWidth; масштаб и поворот — scaleX, scaleY, angle; и даже переворот (180 градусов) — flipX, flipY.
Список всех атрибутов можно найти на официальном сайте
ПослесловиеДля начала достаточно. Мы затронули только самые базовые аспекты Fabric. Разобравшись с ними, вы с лёгкостью сможете создать как простые, так и сложные фигуры, или картинки.
Например вот, что получилось у меня с использованием Fabric.js:
| Прикрепленный файл | Размер |
|---|---|
| Исходный код Angry bird | 37.71 кб |
Комментарии
Удобная библиотека.