3、圆周运动与椭圆运动

结合正弦函数与余弦函数，实现物体的圆周运动、

 

分析：

我们绘制一个球体ball

1、在水平方向上，根据公式 y = cos（x），求出球体以余弦函数运动时的 x 坐标，幅度大小为圆周的半径 radius ，余弦函数的初始值设为canvas的中点坐标 centerX ， 则求得球体圆周运动的 x 轴坐标如下：

    x = centerX + Math.cos(angle) * radius;

2、在垂直方向上，根据公式 y = sin（x），求出球体以正弦函数运动时的 y 坐标，幅度大小为圆周的半径 radius ，正弦函数的初始值设为canvas的中点坐标 centerY， 则求得球体圆周运动的 y 轴坐标如下：

    y = centerY + Math.sin(angle) * radius;

3、变化的角度为 angle，角度递增的幅度为speed，则角度每次变化如下：

    angle += speed;

 

代码实现如下

index.html：

    
    
    
    


    
        Your browser does not support HTML5 Canvas.
    

    
    

 

ball.js：

function Ball(x, y, radius, color) {
    if(x === undefined) {
        x = 0;
    }
    if(y === undefined) {
        y = 0;
    }
    if(radius === undefined) {
        radius = 40;
    }
    if(color === undefined) {
        color = "#00ffff";
    }
    this.x = x;
    this.y = y;
    this.color = color;
    this.radius = radius;
    this.scaleX = 1;
    this.scaleY = 1;
}

Ball.prototype.draw = function(context) {
    context.save();

    context.translate(this.x, this.y);
    context.fillStyle = this.color;
    context.scale(this.scaleX, this.scaleY);

    context.beginPath();
    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
    context.closePath();

    context.fill();
    context.stroke();

    context.restore();
}

 

如果我们想实现椭圆运动，只需使用不同的半径计算 x 与 y 的坐标位置，假设为 radiusX 和 radiusY，则修改如下即可：

    radiusX = 150;

    radiusY = 100;

    x = centerX + Math.cos(angle) * radiusX;

    y = centerY + Math.sin(angle) * radiusY;