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); 

    ...