十四.2加速度运动，加速度的合成和分解

最新推荐文章于 2021-09-14 20:44:59 发布

陆康永

最新推荐文章于 2021-09-14 20:44:59 发布

阅读量3.9k

点赞数

分类专栏： canvas CANVAS 文章标签： canvas 加速度加速度合成和分解三角函数

本文链接：https://blog.csdn.net/xiaomogg/article/details/79302588

版权

canvas 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CANVAS

16 篇文章 1 订阅

订阅专栏

加速度运动，是指方向相同、速度大小变化的运动。速度递增是加速度，速度递减是减速度.

加速度运动分为两种：匀速加速度和变速运动

加速运动和匀速运动的区别：匀速运动是速度大小一致报错不变，加速运动的速度大小会随着时间的变化而改变（变大或者变小）

图1：

语法：

vx+=ax;

vy+=ay;

obj.x+=vx;

obj.y+=vy;

obj.x为X轴的坐标

obj.y为y轴的坐标

vx表示x轴方向的加速度

vy表示Y轴的加速度

demo1: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 centerY = cnv.height / 2;
        //初始化X轴的速度以及加速度
        var vx=0;
        var ax=0.2;

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

            ball.x += vx;
            ball.fill(cxt);
     
			vx+=ax;//速度自动增加（加速度）

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

</html>

demo2: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 centerY = cnv.height / 2;
        //初始化X轴的速度以及加速度
        var vx=10;
        var ax=0.2;

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

            ball.x += vx;
            ball.fill(cxt);
     
			vx-=ax;//速度自动减（加速度）

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

</html>

这2个demo最值得注意的是第二个的速度虽然是负方向，但是一开始物体还是在X轴正方向上运动，直到初始速度加上负方向加速度后为负数的时候才会往X轴负方向运动，这里可以把速度和加速度分开区分理解的关键点，加速度代表作用力的方向，但是并不能代表物体的运动方向

很多场景都会需要用到这种效果，例如摩擦力就是典型的案例

二，速度有合成和分解，加速度也有合成和分解

如果我们需要小球沿着任意返现进行加速度运动，就可以使用合成和分解。

注意，对于加速度运动，分解的是加速度，而不是速度！！！

图3：

语法：

ax=a*Math.cos(angle*Math.PI/180);

ax=a*Math.sin(angle*Math.PI/180);

vx+=ax;

vy+=ay;

obj.x+=vx;

obj.y+=vy;

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

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

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

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

ax表示X方向的加速度，ay表示Y方向的加速度

a表示任意方向的加速度大小，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 vx=0;
        var vy=0;

        var a=0.2;

        ball.y = centerX;
        //速度与X轴方向角度为30度
        var ax=a*Math.cos(30*Math.PI/180);
        var ay=a*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);
            //角度递增
            vx+=ax;
            vy+=ay;

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

</html>

陆康永

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
十四.2加速度运动，加速度的合成和分解

加速度运动，是指方向相同、速度大小变化的运动。速度递增是加速度，速度递减是减速度.加速度运动分为两种：匀速加速度和变速运动加速运动和匀速运动的区别：匀速运动是速度大小一致报错不变，加速运动的速度大小会随着时间的变化而改变（变大或者变小）图1：语法：vx+=ax;vy+=ay;obj.x+=vx;obj.y+=vy;obj.x为X轴的坐标obj.y为y轴的坐标vx表示x轴方向的加速度vy表示Y轴的加...
复制链接

扫一扫