教你如何使用canvas实现动态连线小球

先弄一个画布

 <canvas id="myCanvas"></canvas>

为了效果直观一点，我们设置了一点样式

 * {
        margin: 0;
        padding: 0;
    }
 canvas {
            display:block;
            border: 1px solid red;
            margin: 5px auto;
            background-color: pink;
        }

然后重点就在js方面了

        var canvas = document.getElementById("myCanvas")
        var ctx = canvas.getContext('2d')
        // 画布的尺寸
        canvas.width = document.documentElement.clientWidth
        canvas.height = document.documentElement.clientHeight -30
        
        var ballArr = []
        function Ball() {
            this.x = parseInt(Math.random() * canvas.width)
            this.y = parseInt(Math.random()