Создание анимированных диаграмм — плагин Chart.js

Здравствуйте, уважаемые читатели XoZbloga! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js. Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует HTML5 Canvas. В качестве примера использования chart.js рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.

Фотогалерея для сайта с использованием HTML5 Canvas

Здравствуйте уважаемые читатели XoZblogа! В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. Смотрите демо-версию, чтобы оценить эффект при наведении на изображение. Оттенки серой «копии» основного изображения создаются с помощью Canvas, а также с CSS3 для плавного изменения «копии» на основное изображение. Советую также ознакомиться с уроком Галерея изображений на jQuery. Коротко о том, что такое Canvas. Спецификация HTML5 включает множество новых тегов, одним из которых является canvas.