canvas小球运动的例子

最新推荐文章于 2021-11-23 15:09:44 发布

zpr555

最新推荐文章于 2021-11-23 15:09:44 发布

阅读量691

点赞数 1

分类专栏： canvas h5 文章标签：前端h5 canvas

本文链接：https://blog.csdn.net/zpr5554321/article/details/87879287

版权

canvas 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

这是慕课网用canvas写的一个比较简单的2d小球运动的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" style="display:block;margin:50px auto;"></canvas>
    <script>
        var ball = {x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};
        window.onload =function(){
            var canvas = document.getElementById('canvas');
            //使用2d画图
            var context = canvas.getContext('2d');
            canvas.width = 1024;
            canvas.height = 768;
            setInterval(
                function () {
                    render(context);
                    update();
                },
                50
            );
        }

        function render(cxt) {
            cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
            cxt.fillStyle = ball.color;
            cxt.beginPath();
            //画球
            cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
            cxt.closePath();
            cxt.fill();
            cxt.stroke();
        }

        function update() {
            ball.x += ball.vx;
            ball.y += ball.vy;
            ball.vy += ball.g;//y轴方向有重力加速度
            if(ball.y >= 768-ball.r){//当小球掉到地面了，反弹
                ball.y = 768-ball.r;
                ball.vy = -ball.vy*0.5;//添加点摩擦力
            }
        }
    </script>
</body>
</html>