<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Форум сайта MyRusakov.ru

Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js
18.11.2013 15:16:01 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #1
tikkiwiki

tikkiwiki

Модератор

Модератор

Дата регистрации:
15.11.2013 15:36:59

Сообщений: 194

Здравствуйте уважаемые читатели данного форума!

Сегодня я хочу Вам рассказать об достаточно интересной вещи, такой как тег Canvas. В новой, современной, пятой версии стандарта HTML появились множество новых тегов, которые позволяют вставлять еще больше различного медиа-контента на Ваш сайт. Остановимся на самом интересном из них, как я выше и писал, это тег Canvas. Этот тег создает область, в которой при помощи JS, можно создавать различные объекты, выводить видео/изображения/, создавать различную реалистичную 3D-анимацию и рисовать рисунки.
Синтаксис данного тега очень простой, как впрочем и любой другой в HTML.

<canvas id="идентификатор">
</canvas>

Так же тег имеет всего 2 атрибута, это height и width
К примеру:
<canvas id="myrusakov" width="200" height="200"></canvas>
Эти атрибуты не обязательны, если ширина(width) и высота (height) не заданы, то canvas будет создан с автоматическими параметрами в 300 ширину и 150 пикселей в высоту соответственно. Размер элемента можно задать так же в CSS.

Перейдем к практической части.

Прежде чем начать урок рисования, давайте заготовим минимальный шаблон и назовем его canvas.html
<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov{
border: 2px #000 solid;
}
</style>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
var myrusakov= document.getElementById("myrusakov";
var ctx = myrusakov.getContext('2d');
</script>
</body>
</html>


Поле для рисования создано. Для удобства ,я выделил его черной рамкой, чтобы наше поле не сливалось с белым полем браузера.

Приступим к рисованию.

Использовать стандартные методы, довольно глупо и вовсе не стоит, их очень мало и они ужасно не доработанные, поэтому будем использовать готовую библиотеку, библиотека называется Fabric.js. На сегодняшний день, последней версией является 1.3, скачать можно тут:

https://github.com/kangax/fabric.js/downloads

Использовать стандартное API Canvas лишь стоит, если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур наполненных различной анимацией и прочими красивостями. Подключим данную библиотеку. Предварительно скачав fabric.js-1.3.0 положим его в папку с нашим canvas.html, в файл canvas.html добавим следующее:


<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov {
border: 1px #000 solid;
}
</style>
<meta charset="utf-8"/>
<!-- подключаем скачанный Fabric.js -->
<script src="min.js"></script>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
// создаем "оболочку" вокруг canvas элемента (id="myrusakov"
var myrusakov = new fabric.Canvas('myrusakov');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#000',
width: 100,
height: 60
});
// добавляем прямоугольник, чтобы он отобразился
myrusakov.add(rect);
</script>
</body>
</html>


Сохраним и проверим, что у нас получилось, а должно получиться вот такое:

http://hkar.ru/m3uh

Рисовать прямоугольник — это конечно легко и не серьезно. Давайте хоть немного усложним задачу и что-то с ним сделаем, например повернем на 70 градусов. Делается это элементарно просто. В параметры мы добавляем новый критерий, это angle(градус).


var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#000',
width: 100,
height: 60,
angle: 70


Пример того, что получилось:

http://hkar.ru/m3uj

Используя Fabric, всё что надо было сделать, это добавить значение угла с углом наклона 70° градусов. Без использования данной библиотеки, обстояло бы не все так просто. Во первых, мы не можем управлять объектами напрямую. Вместо этого, приходится менять позицию и угол самого битмапа с помощью ctx.translate, ctx.rotate. Потом рисуем прямоугольник, при этом не забывая отодвинуть битмап соответственно (-50, -30), так, чтобы прямоугольник появился на 100,100. Ещё надо не забыть перевести угол из градусов в радианы при повороте битмапа. Очень много сложностей и различных мелочей требует стандартное API. Надеюсь я Вам кратко и понятно изъяснил, зачем используется данная библиотека. Я уже показывал, как можно нарисовать прямоугольник и работать с ним, используя средства Fabric.js, к счастью эта библиотека содержит в себе не только прямоугольник, но и другие геометрические фигуры, такие как круг, квадрат, треугольник, эллипс и т.д.(fabric.Circle, fabric.Triangle, fabric.Ellipse и т.д.)

Попробуем сделать простенькую анимацию.

Анимировать объект можно по такому же принципу и с такой же лёгкостью. Каждый объект в Fabric имеет метод animate (наследуя от fabric.Object) который анимирует этот объект.Первый аргумент это атрибут который хотим менять. Второй аргумент — финальное значение этого атрибута.
После,

myrusakov.add(rect);
Добавим:
rect.animate('angle', 0,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('width', 760,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('height', 480,{
onChange: myrusakov.renderAll.bind(myrusakov)
});


Например если прямоугольник находится под углом 70°, а мы применим значение 0°, то прямоугольник постепенно будет изменять свое значение от 70° до 0°.Ну а последний аргумент — опциональный объект для более детальных настроек (длительность, вызовы и т.д).
Что должно получиться в конечном итоге:


<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov {
border: 1px #000 solid;
}
</style>
<meta charset="utf-8"/>
<!-- подключаем скачанный Fabric.js -->
<script src="min.js"></script>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
// создаем "оболочку" вокруг canvas элемента (id="myrusakov"
var myrusakov = new fabric.Canvas('myrusakov');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#D5002C',
width: 100,
height: 60,
angle: 70
});
// добавляем прямоугольник, чтобы он отобразился

myrusakov.add(rect);
rect.animate('angle', 0,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('width', 760,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('height', 480,{
onChange: myrusakov.renderAll.bind(myrusakov)
});
</script>
</body>
</html>


Официальная документация Fabric.js http://fabricjs.com/docs/

В следующем уроке, будем рисовать птицу с Angry Birds

Примеры работ сделанных с помощью Canvas:

http://web-master4ree.com/html-a-dhtml/838-10-isklyuchitelnyx-primerov-html5-canvas-i-prilozhenij.html

Надеюсь Вам понравилось, спасибо за внимание!
Профиль
22.11.2013 17:18:37 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #2
KatiaS

KatiaS

Новичок

Новичок

Дата регистрации:
22.11.2013 17:09:11

Сообщений: 1

Очень интересная статья. Написана на доступном и понятном языке.Ничего лишнего, вся информация по-сути. Делать всё шаг за шагом очень легко. Главное, что понятно даже новичку. Спасибо автору!
Профиль
22.11.2013 23:10:37 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Спасибо за статью - интересная информация!
Профиль