Javascript 使用setInverval调用函数以创建动画形状

我正在学习JavaScript，我想知道如何在同一画布上创建多个动画圆圈。我创建了此函数，因此不必为所有不同的圆重复代码：

        const canvas = document.querySelector("canvas").getContext("2d");

        balls = (color, x, y, dx, dy) => {

            setInterval (() => {

                canvas.clearRect(0, 0, 600, 600);
                canvas.fillStyle = color;
                canvas.beginPath();
                canvas.arc(x, y, 20, 0, Math.PI * 2);
                canvas.fill();

                if (x >= 600 || x <= 0) {
                    dx = -dx;
                }

                if (y >= 600 || y <= 0) {
                    dy = -dy;
                }

                x = x + dx;
                y = y + dy;

            }, 20);
        }

        balls("#00f", 35, 35, 5, 5);

        balls("#f00", 400, 35, 5, 5);

const canvas=document.querySelector（“canvas”）.getContext（“2d”）；
球=（颜色，x，y，dx，dy）=>{
设置间隔（（）=>{
canvas.clearRect（0,060600）；
canvas.fillStyle=颜色；
canvas.beginPath（）；
canvas.arc（x，y，20，0，Math.PI*2）；
canvas.fill（）；
如果（x>=600 | | x=600 | | y欢迎使用StackOverflow Mira！代码的问题是调用canvas.clearRect（0，0，600，600）。尝试在同一时间间隔处理程序中设置两个球的动画。概念很简单，在同一帧中绘制所有对象的位置


const canvas=document.querySelector（“canvas”）.getContext（“2d”）；
让myBalls=[]；
//动画处理程序
设置间隔（（）=>{
canvas.clearRect（0,0200200）；
myBalls.forEach（ball=>{
canvas.fillStyle=ball.color；
canvas.beginPath（）；
canvas.arc（ball.x，ball.y，5,0，Math.PI*2）；
canvas.fill（）；
如果（ball.x>=200 | | ball.x=200 | | ball.y{
myBalls.push（{color，x，y，dx，dy}）；
}
球（“黑色”、35、35、5、5）；
球（“红色”、100、35、5、5）；

可能是因为在绘制每个球之前，您一直在清理整个画布。这样，您永远无法同时拥有这两个球。您需要将球添加到数组中，并在一个帧中同时绘制这两个球。