HTML5 canvas 画平抛小球

最新推荐文章于 2021-06-18 14:21:56 发布

「已注销」

最新推荐文章于 2021-06-18 14:21:56 发布

阅读量306

点赞数

分类专栏： HTML JavaScript CSS

本文链接：https://blog.csdn.net/xtingjie/article/details/114044487

版权

HTML JavaScript CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>小球平抛运动</title>
    </head>
    <body>
        <canvas id="mycanvas">该浏览器不支持canvas</canvas>
        <script>
            var mycanvas = document.getElementById("mycanvas");
            var ctx = mycanvas.getContext("2d");

            var WIDTH = document.documentElement.clientWidth;
            var HEIGHT = document.documentElement.clientHeight; //这里获取客户端长宽，浏览器大小变化的时候，也随之变换
            mycanvas.width = WIDTH;
            mycanvas.height = HEIGHT;

            //定义一个小球类，包含位置、速度、颜色等信息
            function Ball(x, y, velX, velY, color, size){
                this.x = x;
                this.y = x; 
                this.velX = velX;
                this.velY = velY;
                this.color = color;
                this.size = size;
            }
            var guiji = []; // 记录轨迹坐标
            // 画出小球
            Ball.prototype.draw = function(){
                ctx.clearRect(0, 0, WIDTH, HEIGHT); //清空画布，否则有重影
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, 2*Math.PI);
                ctx.fill();
                drawGuiji();
                guiji.push([this.x, this.y]);
            }
            // 画出小球的移动轨迹
            function drawGuiji(){
                var t1 = guiji.length;
                ctx.moveTo(0, 0);
                ctx.strokeStyle = '#E0E0E0';
                ctx.lineWidth = 1;
                for(i=0; i<t1; i++)
                {
                    ctx.lineTo(guiji[i][0], guiji[i][1]);
                    ctx.stroke();
                }
            }
            // 更新小球的位置，速度等信息
            Ball.prototype.update = function(){
                // 如果撞到地面，就反弹
                if(this.y > HEIGHT)
                {
                    this.velY = -this.velY;
                    this.velX = this.velX - this.velX * 0.005;
                }
                else
                {
                    this.velY = this.velY + 1 - this.velY * 0.01; //加速下落, 考虑了空气阻力，速度越大，阻力越大
                    this.velX = this.velX - this.velX * 0.005;
                }
                this.x = this.x + this.velX;
                this.y = this.y + this.velY;
            }

            // 循环
            var ball = new Ball(0, 0, 8, 0, "red", 15);
            function loop(){
                ball.draw();
                ball.update();
                requestAnimationFrame(loop);
            }

            window.onload = loop;
        </script>
    </body>
</html>