Canvas<小球自由落体效果>

效果图：

tantiao.gif

此效果参考他人代码，并加以注释和改造，想直接看源地址效果的话，可直接点击下方链接

参考地址：http://www.jq22.com/webqd6697

提供以下地址，方便你们理解和学习
1. canvas绘制圆
2. requestAnimationFrame更新动画
3. 清空画布

代码的注释我感觉已经很详细了，方便大家理解，这里就不说那么多废话了(本人之前有了解过canvas，接下来有机会，会从基础的知识点开始更新 😄)

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    canvas {
        display: block;
    }
</style>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    let w, h;                          // 定义一个窗口宽高的变量
    let ball_num = 1;                  //每次点击生成的小球个数
    let Gravity = 0.8;                 //小球下落速度 越小越慢
    let Firction = 0.9;                //小球弹跳力度 越大越高
    let ballArray = [];               //储存小球的数组

    //获取canvas标签
    let canvas = document.querySelector("#canvas")
    //创建画笔
    let ctx = canvas.getContext("2d");
    //小球颜色数组
    let colorArray = ["rgb(65, 105, 225)", "rgb(65, 166, 225)", "rgb(65, 214, 225)", "rgb(65, 225, 190)", "rgb(65, 225, 132)"];

    // 获取窗口大小方法
    function getWindow_size() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }


    // 随机生成一个 lower ~ upper 的整数
    function randomIntFronRange(lower, upper) {
        return Math.floor(Math.random() * (upper - lower)) + lower;
    };

    //创建小球的方法(主要是小球运动轨迹的绘制)
    function Ball(x, y, dx, dy, radius, color) {
        //此处并没有直接执行绘制动画，而是事先定义好相关属性值
        this.x = x;
        this.y = y;
        this.dy = dy
        this.dx = dx;
        this.radius = radius;
        this.color = color;

        //绘制一个圆球，并填充颜色
        // https://www.w3school.com.cn/tags/canvas_arc.asp

        this.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        }

        //实时更新动画
        this.update = function () {
            //y 轴临界值判断
            //如果小球在下降过程中到达底部时(及绘制小球的中心坐标位置超出窗口高度时)
            // alert(this.dy)  //不太清楚的可以 alert 一下
            if (this.y + this.radius + this.dy + Gravity > h) {
                //小球 y轴方向改变 （往上）
                this.dy = -this.dy;
                this.dy *= Firction;
                this.dx *= Firction;
            } else {
                //小球  y轴坐标递增 (往下)
                this.dy += Gravity;
            }
            //x 轴临界值判断
            if (this.x + this.radius + this.dx >= w || this.x - this.radius + this.dx <= 0) {
                //小球 x轴方向改变
                this.dx = -this.dx;
            }
            //小球 x,y坐标位置改变（因为之前的 dy,dx有取反过，所以此处会实现上下，左右的运动路线）
            this.y += this.dy;
            this.x += this.dx;
            //根据改变后的坐标位置绘图
            this.draw();
        }
    };

    //创建小球的方法(相关样式，起始坐标位置等)
    function init(m_x, m_y) {
        for (let i = 0; i < ball_num; i++) {
            let radius = randomIntFronRange(2, 10); //圆的半径
            // x,y 为绘制圆的中心坐标
            let x = m_x;
            let y = m_y;
            let dx = randomIntFronRange(-5, 5);//小球 x 轴位置 递增或者递减的一个随机值（小球是往左还是往右弹）
            let dy = randomIntFronRange(1, 2); //小球 y 轴位置 递增或者递减的一个随机值（小球上下弹动高度）
            let color = colorArray[Math.floor(Math.random() * colorArray.length)]; //从颜色数组里面随机取一个颜色
            ballArray.push(new Ball(x, y, dx, dy, radius, color)); //往小球数组里面添加每个小球的相关数值
        }
    };
   
   //执行动画方法
    function animation() {
        // 更新动画
        // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
        requestAnimationFrame(animation)
        //清除每个小球的运动痕迹
        ctx.clearRect(0, 0, w, h);
        for (let n of ballArray) {
            n.update();
        }
    };

    window.onload = function () {
        getWindow_size();
        //监听鼠标点击事件
        document.addEventListener("mousedown", function (event) {
            //清空画布
            // https://www.w3school.com.cn/tags/canvas_clearrect.asp
            ctx.clearRect(0, 0, w, h);
            //每次点击时获取鼠标位置，以鼠标位置生成小球
            init(event.clientX, event.clientY);
        });
        animation();
    }
</script>

</html>