圈在一個圓形路徑

移動如何使用HTML5和JavaScript 我的代碼移動圓沿直線路徑在下面給出我移動的圓在一個圓形路徑。我怎樣才能改變路徑爲圓形？圈在一個圓形路徑

<script> 

    var context; 
    var x=100; 
    var y=250; 
    var dx=5; 
    var dy=5; 

    function move() 
    { 
    context= rectangle.getContext('2d'); 
    setInterval(draw,20); 
    } 

    function draw() 
    { 
    context.clearRect(0,0,400,400); 
    context.beginPath(); 
    context.fillStyle="#0000ff"; 

    context.arc(x,y,20,0,Math.PI*2,true); 
    context.closePath(); 
    context.fill(); 

    x+=dx; 


    } 
    </script> 

    <canvas id="rectangle" width="400" height="400" style="border:1px solid #000000;" > 
    </canvas> 
    <input type="button" onClick="move();" width="100" height="100" value="click "/> 

</body>

來源

2013-06-20 user2478478

此代碼不，當我把它放在一個的jsfiddle出現在任何瀏覽器是爲我工作。 – jezzipin

也許看着從這個jQuery插件代碼將提供一些線索，他們是如何繪製自己的社交圈。 http://anthonyterrien.com/knob/ – Drew

你已經做了一切;現在爲了將它移動在圓，而不是在一條線上，你需要選擇一個dƟ而不是DX的，這樣就可以同時移動X和Y座標。

現在讓我們說你有你的心在（A，B）和路徑半徑爲r，則您的路徑將如下所示：

enter image description here

所以你有你的座標[R cosƟ河sinƟ

所以在你繪製函數做到這一點

x=a+r*cos(Ɵ); 
y=b+r*sin(Ɵ); 
Ɵ+=dƟ;

，而不是

x+=dx;

精確選擇弧度dƟ，使運動看起來平滑。 [也可以選擇一些可行的變量名，而不是Ɵ和dƟ]

來源

2013-06-20 14:04:41

圈在一個圓形路徑

回答

相關問題