如何使針圖像從180度旋轉到0，360度

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas Cog</title> 
    <script type="text/javascript"> 
     var cog = new Image(); 
     function init() { 
      cog.src = 'needle.png'; // Set source path 
      setInterval(draw,100); 
     } 
     var rotation = 0; 
     function draw(){ 
      var ctx = document.getElementById('myCanvas').getContext('2d'); 
      ctx.globalCompositeOperation = 'destination-over'; 
      ctx.save(); 
      ctx.clearRect(0,0,500,500); 
      ctx.translate(200,180); // to get it in the origin 
      rotation +=1; 
      ctx.rotate(rotation*Math.PI/180); //rotate in origin 
      ctx.translate(0,-90); //put it back 
      ctx.drawImage(cog,(-13.5),(-13.5),48,111); 
      ctx.restore(); 
     } 
     init(); 
    </script> 
</head> 
<body> 
    <canvas width="500" height="500" id="myCanvas"></canvas> 
</body> 
</html>

來源

2011-03-23 Kundan SIngh

哪些錯誤與完全腳本一半？ – 2011-03-23 13:21:27

如何使針圖像從180度旋轉到0，360度

回答

相關問題