HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.
Читать полностью »
Рубрика «canvas» - 24
Выводим текст на HTML5 Canvas
2012-03-19 в 12:34, admin, рубрики: canvas, html5, Веб-разработка, метки: Canvas, html5JFavicon — простая библиотека для упраления favicon
2012-03-19 в 12:11, admin, рубрики: canvas, favicon, javascript, JFavicon, JS, динамика, оповещения, сайты, счетчик, метки: favicon, JFavicon, динамика, оповещения, сайты, счетчик 
Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©
Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:
- Автоматическая установка favicon
- Изменение favicon, в зависимости от каких-либо событий
- Счетчик, с возможностью смены стиля, прямо в favicon
- Динамическое изменение title страницы
JFavicon — простая библиотека для управления favicon
2012-03-19 в 12:11, admin, рубрики: canvas, favicon, javascript, JFavicon, JS, веб-дизайн, динамика, оповещения, сайты, счетчик, метки: favicon, JFavicon, динамика, оповещения, сайты, счетчик 
Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©
Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:
- Автоматическая установка favicon
- Изменение favicon, в зависимости от каких-либо событий
- Счетчик, с возможностью смены стиля, прямо в favicon
- Динамическое изменение title страницы
Decoding HTML5
2012-03-12 в 12:16, admin, рубрики: canvas, ebook, geolocation, history api, html5, html5 forms, web storage, метки: Canvas, ebook, geolocation, history api, html5, html5 forms, web storageДоброго времени суток!
Несколько дней назад в свет была выпущена книга под названием "Decoding HTML5", в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:
Читать полностью »
Tinyicon — счетчик в favicon на js
2012-03-12 в 11:28, admin, рубрики: canvas, favicon, javascript, javascript library, метки: Canvas, favicon, javascript, javascript libraryTinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.
Обработка изображений / Пиксельные искажения с билинейной фильтрацией в HTML5 canvas
2012-02-21 в 16:31, admin, рубрики: canvas, fisheye, html5, image processing, javascript, zoom, обработка изображений, метки: Canvas, fisheye, html5, image processing, javascript, zoom, обработка изображений 
В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.
Canvas и пиксели
Я не буду описывать полностью объект Canvas, для этого есть документация. Остановимся на том, что нам нужно. Во-первых, это получение 2D-контекста:
var context = canvas.getContext('2d'); Этот контекст умеет многое делать сЧитать полностью »
JavaScript / Мысли о скриншотах через JavaScript
2012-02-16 в 11:57, admin, рубрики: canvas, javascript, скриншоты, метки: Canvas, javascript, скриншоты При разработке одного сервиса я столкнулся с необходимостью дать возможность пользователям сообщать об ошибках. Проблема заключалась в том, чтобы пользователь мог сделать скриншот без использования стороннего софта или сервиса.
Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.
Скачать, посмотреть примеры и почитать подробнее можно тут. Вкратце: эта штука умеет создавать скриншот страницы в элементе canvas, а оформлена в виде jquery плагина.
К примеру вешаем на что-нибудь клик:
$(document).ready(function() {
$('#megaButton').live('click',function(){
//собственно включение самого html2canvas
$('body').html2canvas();
Читать полностью »
Canvas / 3D Роза методом Монте-Карло
2012-02-07 в 9:14, admin, рубрики: canvas, javascript, js1k, surface, монте-карло, метки: Canvas, javascript, js1k, surface, монте-карло
В этой статье я надеюсь вдохновить читателей, интересующихся компьютерной графикой, чтобы экспериментировать и весело провести время с различными методами визуализации.Roman Cortes для конкурса любви 2012 js1k сделал 3D розу на javascript (canvas), используя метод Монте-Карло.
Кратко о методе Монте-Карло
Ме́тод Мо́нте-Ка́рло — общее название группы численных методов, основанных на получении большого числа реализаций стохастического (случайного) процесса, который формируется таким образом, чтобы его вероятностные характеристики совпадали с аналогичными величинами решаемой задачи. Используется для решения задач в различныхЧитать полностью »
HTML5 / Рисуем на холсте или Где же Да Винчи 2.0
2012-02-06 в 11:56, admin, рубрики: canvas, html5, web 2.0, метки: Canvas, html5, web 2.0
Доброго времени суток!
Введение
Только ленивый никогда не открывал какой-либо графический редактор, чтобы нарисоввать что-нибудь. Все мы этим занимались. Да и сейчас занимаемся. Только вот графические редакторы представляют собой исполняемые файлы, а хочется открыть страничку в браузере и начать рисовать, после чего сохранить результат на тот же сайт.
И с приходом HTML5 у нас такая возможность появилась!
new Canvas() ?
Для того, чтобы рисовать на холсте, сначала мы должны объявить элемент Canvas в разметке нашей страницы с некоторыми атрибутами, среди которых width — высота и height — ширина нашегоЧитать полностью »