html5畫布中的旋轉邏輯

Question

我有這個動畫，但我不能克服邏輯。我希望有人能幫助我。

基本上我需要這個：http://jsfiddle.net/PDE85/9/但沒有箭頭做這樣的瘋狂動作。它應該連接到空心圓的前面以模擬擴展箭頭。

我得到了turn right here的三角形，但它不起作用，當我把它與第一個例子中看到的position logic混合。

這裏是參考

(function() { 

    var size = ($(window).height()/5)*4; 
    $("#intro-container").css('width',size); 
    $("#intro-canvas").css('width',size); 
    $("#intro-canvas").css('height',size); 

    var interval = window.setInterval(draw, 30); 
    var degrees = 0.0; 
    var offset = 20; 
    var rotate = 0; 

    var canvas = document.getElementById('intro-canvas'); 
    var ctx = canvas.getContext('2d'); 

    canvas.width = size; 
    canvas.height = size; 

    draw(); 

    function draw() { 
     if (canvas.getContext) { 
      ctx.fillStyle="white"; 
      ctx.strokeStyle="white"; 
      ctx.clearRect(0, 0, size, size); 

      ctx.save(); 

      ctx.translate(size/2, size/2); 
      ctx.rotate(-90 * Math.PI/180); 

      ctx.beginPath(); 
      ctx.lineWidth = size/8; 
      ctx.arc(0, 0, size/3, 0, rotate * Math.PI/180); 
      //ctx.shadowBlur=1; 
      //ctx.shadowColor="black"; 

      ctx.stroke(); 

      ctx.restore(); 

      ctx.beginPath(); 
      ctx.save(); 

      // moving logic 
      ctx.translate(size/2, size/2); 
      ctx.rotate(-Math.PI/180 * -rotate+1); 
      ctx.translate(-size/3, -size/3); 

      // rotating logic 
      ctx.translate(size/2, size/2); 
      ctx.rotate((rotate * Math.PI + 420)/180); 

      ctx.moveTo(0,0); 
      ctx.lineTo(size/6,0); 
      ctx.lineTo(0,size/6); 
      ctx.lineTo(0,0); 

      ctx.fill(); 


      ctx.restore(); 

      rotate += 1; 

      if(rotate > 360){ 
       window.clearInterval(interval) 
      } 

     } 
    } 
})(); 

Answer 1

我相信你正在尋找這樣的代碼：http://jsfiddle.net/PDE85/12/

旋轉從何而來，該旋轉呼叫這是不必要的。

另外，您需要一個倒三角形，因此座標需要更新：

... 

    // ctx.rotate((rotate * Math.PI + 420)/180); 
    ctx.moveTo(0,0); 
    ctx.lineTo(-size/6,0); 
    ctx.lineTo(0,-size/6); 

    ...