कैनवास स्पीडोमीटर सुई धीरे-धीरे कैसे स्थानांतरित करें?

Question

मैं अपने स्पीडोमीटर के लिए कैनवास में एक तस्वीर को स्थानांतरित करने के लिए निम्न कोड का उपयोग करता हूं।

var meter = new Image, 
    needle = new Image; 
window.onload = function() { 
    var c = document.getElementsByTagName('canvas')[0]; 
    var ctx = c.getContext('2d'); 
    setInterval(function() { 
     ctx.save(); 
     ctx.clearRect(0, 0, c.width, c.height); 
     ctx.translate(c.width/2, c.height/2); 
     ctx.drawImage(meter, -165, -160); 
     ctx.rotate((x * Math.PI/180); 
     /x degree 
      ctx.drawImage(needle, -13, -121.5); 
      ctx.restore(); 
     },50); 
    }; 
    meter.src = 'meter.png'; 
    needle.src = 'needle.png'; 
} 

हालांकि मैं सुई धीरे-धीरे उस डिग्री तक ले जाना चाहता हूं जो मैंने गतिशील वेबपृष्ठों जैसे दर्ज की है। कोई उपाय? धन्यवाद।

Answer 1

कुछ इस तरह काम करना चाहिए:

var meter = new Image, 
    needle = new Image; 
window.onload = function() { 
    var c = document.getElementsByTagName('canvas')[0], 
     ctx = c.getContext('2d'), 
     x,  // Current angle 
     xTarget, // Target angle. 
     step = 1; // Angle change step size. 

    setInterval(function() { 
     if(Math.abs(xTarget - x) < step){ 
      x = xTarget; // If x is closer to xTarget than the step size, set x to xTarget. 
     }else{ 
      x += (xTarget > x) ? step : // Increment x to approach the target. 
       (xTarget < x) ? -step : // (Or substract 1) 
            0; 
     } 
     ctx.save(); 
     ctx.clearRect(0, 0, c.width, c.height); 
     ctx.translate(c.width/2, c.height/2); 
     ctx.drawImage(meter, -165, -160); 
     ctx.rotate((x * Math.PI/180); // x degree 
      ctx.drawImage(needle, -13, -121.5); 
      ctx.restore(); 
     },50); 
    }; 
    dial.src = 'meter.png'; 
    needle.src = 'needle.png'; 
} 

मैं एक आशुलिपि if/else उपयोग कर रहा हूँ यहाँ x को 1 जोड़ने है कि क्या के लिए, घटाना 1, या कुछ नहीं निर्धारित करने के लिए।

if(xTarget > x){ 
    x += step; 
}else if(xTarget < x){ 
    x += -step; 
}else{ 
    x += 0; 
} 

पढ़ने के लिए बस के रूप में आसान है, एक बार आप जानते हैं कि एक आशुलिपि (ternary operator) की तरह लग रहा है, तो लेकिन यह कम है, और मेरी राय में,: कार्यात्मक रूप से, इस के समान है।

कृपया ध्यान रखें कि यह कोड x मानता है एक पूर्णांक मान (इसलिए, एक फ्लोट नहीं, केवल एक गोलाकार int)।