나침반에 풍향을 표시하는 방법

Question

온도, 습도, 풍속, 풍향 등을 보여야하는 웹 응용 프로그램에서 작업하고 있습니다. 다른 것들을 보여주기 위해 google.visualization.Gauge()를 사용하고 있습니다. 나침반에 바람 방향을 보여주고 싶습니다. 누구든지 웹 사이트/webapp에 사용할 수있는 모든 (jQuery/javascript/etc) 나침반에 대해 알고 있습니까? 감사합니다.

Answer 1

여기 CSS 만 사용하는 방법이 있습니다. 변형을 사용하여 바늘을 회전합니다. DEMOjQuery Rotate 플러그인을 사용할 수도 있습니다.

HTML

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

내가 앉아있어 어떤 방법

#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

난 그냥 개인적으로 난 아직도 자바 스크립트 라이브러리에 충실 것, 완성도를 위해 여기를 게시하도록하겠습니다.