效果展示：

一：分析问题：

首先静态结构是盒子，盒子里面有一个圆。
这个圆是在盒子内移动。
移动的过程体现随机性。
当圆碰到盒子边框时会有反弹效果。

二：解题思路：

明确使用的api是canvas画布。动态效果使用了定时器。
首先绘制出静态结构。
计算出圆移动时圆心的坐标。
计算出圆碰到盒子边框反弹效果的条件。
使用定时器动态实现效果。

三：代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态</title>
</head>

<body>
    <canvas id="myCanvas" width="500px" height="500px" style="border: 1px solid black;"></canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        function rand(mun) {
            return Math.floor(Math.random() * mun + 1)
        }
        var arcX = 40;
        var arcY = 40;
        var arcR = 40;
        var radX = rand(10);
        var radY = rand(10);
        setInterval(function () {
            ctx.clearRect(0, 0, 500, 500);
            arcX += radX;
            arcY += radY;
            if (arcX > c.width - arcR) {
                radX = -radX;
            }
            if (arcX < arcR) {
                radX = Math.abs(radX);
            }
            if (arcY > c.width - arcR) {
                radY = -radY;
            }
            if (arcY < arcR) {
                radY = Math.abs(radY);
            }
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.arc(arcX, arcY, 40, 0, 2 * Math.PI);
            ctx.fill();
        }, 20)
    </script>
</body>

</html>