已知圆的坐标方程为:
X=R*SIN(θ)
Y=R*COS(θ) (0≤θ≤2π)
将0~2π区间等分48段,即设定间隔dig的值为π/24。θ初始值从0开始,按曲线方程求得坐标值(x,y),并在当前坐标处绘制一个半径为r(相比R,r小得多)实心圆。之后每隔0.05秒,清除画布,将θ的初始值加π/24后,按曲线方程求得新坐标值(x,y),并在求得的新坐标处再绘制一个半径为r的实心圆,这样,可以得到半径为r的圆绕半径为R的圆形轨道动态旋转的动画效果。旋转一周后(即θ的值为2π),令θ重新从初值0开始继续动画过程。
编写如下的HTML代码。
绕圆周旋转的小球var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,50);
function move()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
var dig=Math.PI/24;
x0=250;
y0=200;
ctx.strokeStyle="green";
ctx.beginPath();
ctx.arc(x0,y0,100,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();