如何緩慢移動畫布速度計針？

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這裏，以確定是否1添加到x，1。減去，或者什麼都不做。在功能上，這是一樣的：

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

但它的短，而在我看來，也很容易閱讀，一旦你知道什麼，如果（ternary operator）看起來像一個速記。

請注意，此代碼假定x是一個整數值（所以，不是浮點型，只是一個四捨五入的整數）。