#网页动画# 重力小球

最新推荐文章于 2024-07-18 15:09:36 发布

那么的宋健

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量139

点赞数

分类专栏：网页动画文章标签： canvas html5

本文链接：https://blog.csdn.net/u011028161/article/details/116116744

版权

网页动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页重力小球动画

网页canvas重力小球动画

动画效果链接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            width:100%;
            height:100%;
            background:lightslategrey;
            position:fixed;
            top:0;left:0;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        let canvas = document.querySelector("canvas");
        let context = canvas.getContext("2d");

        let width = canvas.width = canvas.offsetWidth;
        let height = canvas.height = canvas.offsetHeight;

        let r = 50; //小球半径
        let x = 50; //圆心横坐标
        let y = 50; //圆心纵坐标
        let vx = 2; //默认横向速度
        let vy = 0; //默认纵向速度
        let g = 0.5; //重力加速度

        (function draw(){
            //清空画布、重新绘制
            context.clearRect(0,0,width,height);
            context.beginPath();

            vy += g;
            x += vx;
            y += vy;

            //碰到底部
            if(y>=height-r){
                y=height-r;

                vy *= -0.6; //纵向速度方向改变 损耗0.3
                vx -= 0.05; //横向速度减少

                if(vx<=0){
                    vx = 0;
                }
            }

            //画实心圆
            context.arc(x,y,r,0,Math.PI*2);
            context.fill();

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

那么的宋健

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#网页动画# 重力小球

网页重力小球动画网页canvas重力小球动画动画效果链接<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ width:100%; height:100%;
复制链接

扫一扫

专栏目录