2012-12-19 1 views
7

다음 코드를 사용하여 속도계를 사용하여 캔버스에서 그림을 이동합니다.천천히 캔버스 속도계 바늘을 이동하는 방법?

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'; 
} 

그러나 스피드 테스트 웹 페이지와 같이 입력 한 정도까지 천천히 바늘을 움직이고 싶습니다. 어떤 생각? 감사합니다. . 이 같은

답변

7

뭔가 일을해야한다 : 나는, x에 빼기 11를 추가하거나 아무것도하지 않는 여부를 확인하려면 여기를 속기 if/else을 사용하고

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'; 
} 

. 당신이 속기 (ternary operator)이 보이는 경우 어떻게 알게되면, 읽기 단지 쉽게

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

하지만 짧은, 그리고 내 의견 : 기능적으로,이 동일합니다.

이 코드는 x이 정수 값 (float가 아닌, 반올림 한 정수)이라고 가정합니다.

+0

완벽하게 작동합니다. 고마워요 :) – user1874941

관련 문제