Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.
Добавление к программе строки glutReshapeFunc(changeSize); приводит к тому, что треугольник перестаёт совсем отрисовываться.
Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Использовать 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');
переменной rect присвоим класс отвечающий за прорисовку прямоугольника.
            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 bird37.71 кб