18.11.2013 15:16:01 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #1
tikkiwiki
Модератор
Дата регистрации:
15.11.2013 15:36:59
Сообщений: 194
Здравствуйте уважаемые читатели данного форума!
Сегодня я хочу Вам рассказать об достаточно интересной вещи, такой как тег Canvas. В новой, современной, пятой версии стандарта HTML появились множество новых тегов, которые позволяют вставлять еще больше различного медиа-контента на Ваш сайт. Остановимся на самом интересном из них, как я выше и писал, это тег Canvas. Этот тег создает область, в которой при помощи JS, можно создавать различные объекты, выводить видео/изображения/, создавать различную реалистичную 3D-анимацию и рисовать рисунки.
Синтаксис данного тега очень простой, как впрочем и любой другой в HTML.
Так же тег имеет всего 2 атрибута, это height и width
К примеру:
Эти атрибуты не обязательны, если ширина(width) и высота (height) не заданы, то canvas будет создан с автоматическими параметрами в 300 ширину и 150 пикселей в высоту соответственно. Размер элемента можно задать так же в CSS.
Перейдем к практической части.
Прежде чем начать урок рисования, давайте заготовим минимальный шаблон и назовем его canvas.html
Поле для рисования создано. Для удобства ,я выделил его черной рамкой, чтобы наше поле не сливалось с белым полем браузера.
Приступим к рисованию.
Использовать стандартные методы, довольно глупо и вовсе не стоит, их очень мало и они ужасно не доработанные, поэтому будем использовать готовую библиотеку, библиотека называется Fabric.js. На сегодняшний день, последней версией является 1.3, скачать можно тут:
https://github.com/kangax/fabric.js/downloads
Использовать стандартное API Canvas лишь стоит, если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур наполненных различной анимацией и прочими красивостями. Подключим данную библиотеку. Предварительно скачав fabric.js-1.3.0 положим его в папку с нашим canvas.html, в файл canvas.html добавим следующее:
Сохраним и проверим, что у нас получилось, а должно получиться вот такое:
http://hkar.ru/m3uh
Рисовать прямоугольник — это конечно легко и не серьезно. Давайте хоть немного усложним задачу и что-то с ним сделаем, например повернем на 70 градусов. Делается это элементарно просто. В параметры мы добавляем новый критерий, это angle(градус).
Пример того, что получилось:
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) который анимирует этот объект.Первый аргумент это атрибут который хотим менять. Второй аргумент — финальное значение этого атрибута.
После,
Добавим:
Например если прямоугольник находится под углом 70°, а мы применим значение 0°, то прямоугольник постепенно будет изменять свое значение от 70° до 0°.Ну а последний аргумент — опциональный объект для более детальных настроек (длительность, вызовы и т.д).
Что должно получиться в конечном итоге:
Официальная документация 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
Надеюсь Вам понравилось, спасибо за внимание!
Сегодня я хочу Вам рассказать об достаточно интересной вещи, такой как тег 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
Надеюсь Вам понравилось, спасибо за внимание!
