十四.2摩擦力

最新推荐文章于 2019-06-17 23:00:49 发布

陆康永

最新推荐文章于 2019-06-17 23:00:49 发布

阅读量401

点赞数

分类专栏： canvas CANVAS 文章标签：摩擦力 canvas

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

版权

canvas 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CANVAS

16 篇文章 1 订阅

订阅专栏

摩擦力，是指阻碍物品运动的相对作用力。其中摩擦力的方向和物体相对运动方向相反。但是，摩擦力只会让速度的绝对值不断的变小直至0而不会改变它的运动方向。

语法:

vx*=F;

vy*=F;

obj.x+=vx;

obj.y+=vy;

F取值[0~1]

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);
        //初始化X轴方向速度为2，抹茶系数为0.95
        var vx = 8;
        var friction = 0.95;

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);
            ball.x += vx;
            ball.fill(cxt);
            //添加摩擦力
            vx*=friction;

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

</html>

摩擦力任意方向在线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);
        //初始化X轴方向速度为2，抹茶系数为0.95
        var vx = 8;
        var speed=8;

        var vx=speed*Math.cos(30*Math.PI/180);
        var vy=speed*Math.sin(30*Math.PI/180);
        var friction = 0.95;

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);
            ball.x += vx;
            ball.y+=vy;

            ball.fill(cxt);
            //添加摩擦力,注意不要混淆（这里分解的依然是速度而不是摩擦力）
            vx*=friction;
            vy*=friction;

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

</html>