एक कंपास पर हवा की दिशा कैसे दिखाएं

Question

मैं एक वेब एप्लिकेशन पर काम कर रहा हूं जहां मुझे तापमान, नमी, हवा की गति, हवा दिशा आदि दिखाना है। मैं google.visualization.Gauge() को अन्य चीजों को दिखाने के लिए उपयोग कर रहा हूं लेकिन मैं एक कंपास पर हवा की दिशा दिखाना चाहता हूँ। क्या किसी को किसी भी (jQuery/जावास्क्रिप्ट/आदि) कंपास के बारे में पता है जिसे मैं किसी वेबसाइट/वेबएप के लिए उपयोग कर सकता हूं? धन्यवाद

Answer 1

यहां केवल सीएसएस का उपयोग करके मेरा दृष्टिकोण है। सुई घुमाने के लिए बदलता है। DEMO आप jQuery Rotate प्लगइन का भी उपयोग कर सकते हैं।

एचटीएमएल

<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

एचटीएमएल 5 और यह कैनवास इस का संक्षिप्त काम करेगा।

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

मैं सिर्फ यह पूर्णता के लिए यहाँ पोस्टिंग कर रहा हूँ, व्यक्तिगत रूप से मैं अभी भी एक जावास्क्रिप्ट पुस्तकालय के लिए छड़ी होगी।