一，匀速运动

匀速运动，又称为匀速直线运动，是指物体在一条直线上运动，并且物体在任何时间间隔内通过的位移都是相等的。

从上面可知，匀速运动需要具备2个条件，及速度大小相同和速度方向一致


匀速运动是一种加速度为0的运动，匀速运动只有一种，那就是匀速直线运动。

至于匀速圆周运动，巨阙来说应该是匀速圆周运动或者军角度运动，应为他的加速度不为0(加速度，意思是速度不断的变动，递增或者递减)


在匀速运动中，速度是有正反方向的，正数为正方向，负数为负方向。


再次强调，CANVAS采用的是W3C坐标，Y轴正反方向是向下的

图1：



语法：

obj.x+=vx;

obj.y+=vy;

obj.x表示X轴的坐标

obj.y表示Y轴的坐标

vx表示x轴方向的速度大小，

vy表示V轴方向的速度大小

在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(10, 30);
        var centerX = cnv.width / 2;
        var centerY = cnv.height / 2;
        var VX=1;//速度

        ball.y = centerX;

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

            ball.x += VX;
            ball.fill(cxt);
            //角度递增


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

</html>

问：对于非X轴或者非Y轴的运动怎么处理？

对于非X轴方向或者非Y轴方向的运动，都是采用“分解速度的方法”来实现。速度分解的方法特别简单，只要使用三角函数就可以了

二，速度的合成和分解

假设我们要求小球沿着任意方向进行匀速运动，而不是X，Y轴，这时候就需要考虑综合X轴和Y轴的合力了。

图2：

语法：

vx=speed*Math.cos(angle*Math.PI/180);

vy=speed*Math.sin(angle*Math.PI/180);

obj.x+=vx;

obj.y+=vy;

obj.x表示物体X方向的坐标

obj.y表示物品Y方向的坐标

vx表示X轴方向的速度大小

vy表示Y轴方向的速度大小

speed表示初始速度的大小

angle表示该速度的方向和X轴正方向的夹角

在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(10, 30);
        var centerX = cnv.width / 2;
        var centerY = cnv.height / 2;
        var speed=1;//速度

        ball.y = centerX;
        //速度与X轴方向角度为30度
        var vx=speed*Math.cos(30*Math.PI/180);
        var vy=speed*Math.sin(30*Math.PI/180);

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

            ball.x += vx;
            ball.y += vy;
            ball.fill(cxt);
            //角度递增


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

</html>

配合atan2函数和三角函数速度分解来实现箭头跟随鼠标效果,关于atan2函数，详情请预览

在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        var arrow=new Arrow(cnv.width/2,cnv.height/2);
        var mouse=tools.getMouse(cnv);
        var speed=1.5;
        var angle=0;

        

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

            //计算出鼠标和箭头的夹角
            var dx=mouse.x-cnv.width/2;
            var dy=mouse.y-cnv.height/2;
            angle=Math.atan2(dy,dx);
            var vx=Math.cos(angle)*speed;
            var vy=Math.sin(angle)*speed;
            arrow.x+=vx;
            arrow.y+=vy;
            arrow.angle=angle;
            arrow.fill(cxt);


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

</html>