Плагин для создания анимированного облака тегов на HTML5 - TagCanvas

TagCanvas - это javascript плагин, который позволяет создать, с помощью HTML5, интересное облако тегов, с красивой анимацией и эффектом объема. Он распространяется на основании лицензии LGPL v3, а значит имеет открытый исходный код.

Этот плагин имеет не сложную настройку. Для начала вы устанавливаете ширину и высоту холста, впикселях, пользуясь атрибутами width и height соответственно. Правда, это сделает размеры фиксированными, но это можно обойти. Сделать размер облака более адаптивным, можно задав ему ширину в 100%, используя стиль CSS. Но есть важное примечание, значения в пикселях должны быть заданы как максимальные размеры облака.

Пример кода:

<div>
<canvas id="resCanvas" width="680" height="300" style="width: 100%"></canvas>
</div>

К сожалению, с адаптивностью в IE 9 и IE 10 есть проблемы. Так как эти версии Internet Explorer не изменяют размер холста равномерно, он получается из-за этого либо сжатым, либо вытянутым. Это достаточно сложно исправить с помощью CSS, но легко используя javascript. Функция ResponsiveTCforIE рассчитает высоту холста к ширине, используя соотношение значений указанных в пикселях.

<script type="text/javascript">
function ResponsiveTCforIE(c) {
var e = document.getElementById(c), rw;
if(e &amp;&amp; e.height &amp;&amp; e.width) {
rw = parseInt( document.defaultView.getComputedStyle( e ).getPropertyValue( 'width' ) );
e.style.height = (rw * e.height / e.width) + 'px';
}
}
if(document.all &amp;&amp; document.addEventListener) {
window.addEventListener('resize', function() {
ResponsiveTCforIE('resCanvas');
}, false);
window.addEventListener('load', function() {
ResponsiveTCforIE('resCanvas');
}, false);
}
</script>

Скачать: