Как показать направление ветра на компасе

Question

Я работаю над веб-приложением, где я должен показывать температуру, влажность, скорость ветра, направление ветра и т. Д. Я использую google.visualization.Gauge(), чтобы показать другие вещи, но Я хочу показать направление ветра на компасе. Кто-нибудь знает о каком-либо (jQuery/javascript/etc) компасе, который я могу использовать для веб-сайта/webapp? Thanks

Answer 1

Вот мой подход, используя только CSS. Используется для поворота иглы. DEMO Вы также можете использовать плагин jQuery Rotate.

HTML

<div id="compass"> 
    <div id="arrow"></div> 
</div>​ 

CSS

#compass { 
    width: 380px; 
    height: 380px; 
    background-image:url('http://i.imgur.com/44nyA.jpg'); 
    position: relative; 
} 
#arrow { 
    width: 360px; 
    height: 20px; 
    background-color:#F00; 
    position: absolute; 
    top: 180px; 
    left: 10px; 
    -webkit-transform:rotate(120deg); 
    -moz-transform:rotate(120deg); 
    -o-transform:rotate(120deg); 
    -ms-transform:rotate(120deg); 

    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#compass:hover #arrow { 
    -webkit-transform:rotate(0deg); 
    -moz-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
}​ 

Answer 2

HTML5 и Canvas сделают короткую работу.

http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm

Я просто разместить его здесь для полноты картины, лично я бы до сих пор придерживаться библиотекой JavaScript.