使用 setInterval 调用函数以创建动画形状答案

【问题标题】：Calling a function with setInverval to create animated shapes使用 setInterval 调用函数以创建动画形状
【发布时间】：2020-03-24 14:11:33
【问题描述】：

我正在学习 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);

但是它不能正常工作。屏幕上只出现第二个球，第一个球一直在闪烁。

我希望有人可以帮助我。谢谢。

【问题讨论】：

可能是因为您在绘制每个球之前一直清理整个画布。像这样，你永远不能两者兼得。您需要将球添加到数组中并在一帧中绘制。

标签： javascript function parameters arguments

【解决方案1】：

欢迎来到 StackOverflow Mira！您的代码的问题是调用 canvas.clearRect(0, 0, 600, 600)。尝试在同一间隔处理程序中为两个球设置动画。概念很简单，在同一帧内绘制所有对象的位置。

const canvas = document.querySelector("canvas").getContext("2d");
 let myBalls=[];
//animation handler
setInterval (() => {
                canvas.clearRect(0, 0, 200, 200);
                myBalls.forEach(ball=>{
                  canvas.fillStyle = ball.color;
                canvas.beginPath();
                canvas.arc(ball.x, ball.y, 5, 0, Math.PI * 2);
                canvas.fill();

                if (ball.x >= 200 || ball.x <= 0) {
                    ball.dx = -ball.dx;
                }

                if (ball.y >= 200 || ball.y <= 0) {
                    ball.dy = -ball.dy;
                }

                ball.x = ball.x + ball.dx;
                ball.y = ball.y + ball.dy;
                });
            }, 20);
            
            
       
        balls = (color, x, y, dx, dy) => {
            myBalls.push({color, x, y, dx, dy});
        }

        balls("black", 35, 35, 5, 5);

        balls("red", 100, 35, 5, 5);

&lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;

【讨论】：