3、圆周运动与椭圆运动

最新推荐文章于 2021-03-23 17:54:31 发布

奇遇世界

最新推荐文章于 2021-03-23 17:54:31 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/late_in_autumn/article/details/90299070

版权

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

分析：

我们绘制一个球体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：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
        body {background-color: #ccc}
        canvas {background-color: #fff}
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        Your browser does not support HTML5 Canvas.
    </canvas>

    <script src="./js/ball.js"></script>
    <script>
        (function(){
            window.addEventListener("load", eventWindowLoaded, false);
            function eventWindowLoaded(){
                let canvas = document.getElementById("canvas");
                if(!canvasSupport(canvas)){
                    return ;
                }
                let context = canvas.getContext("2d");
                drawScreen(canvas, context);
            }
            function canvasSupport(e){
                return !!e.getContext;
            }
            
            // write your codes
            function drawScreen(canvas, context){
                let ball = new Ball();
                let centerX = canvas.width / 2;
                let centerY = canvas.height / 2;

                let radius = 40;
                let angle = 0;
                let speed = 0.05;
                
                ball.x = centerX;
                ball.y = centerY;
                
                (function drawFrame() {
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    let x = centerX + Math.cos(angle) * radius;
                    let y = centerY + Math.sin(angle) * radius;
                    ball.x = x;
                    ball.y = y;

                    angle += speed;

                    ball.draw(context);
                }())
            }

        })();
    </script>
</body>
</html>

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;