Javascript 如何在每次球从墙上反弹时更改球的颜色？

我在搜索一些JavaScript代码时看到了这个问题。代码很简单，但是如果我们想在球每次从墙上反弹时随机改变球的颜色，该怎么办呢

我的想法：

拥有一个随机颜色生成器并使用它。像这样的

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

function myFunction() {
    var context;
    var dx = 4;
    var dy = 4;
    var y = 150;
    var x = 10;
    var color = get_random_color();

    function draw() {
        context = myCanvas.getContext('2d');
        context.clearRect(0, 0, 400, 400);
        context.beginPath();
        context.fillStyle = color;
        context.arc(x, y, 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
        if (x < 0 || x > 400) {
            dx = -dx;
            color = get_random_color();
        }
        if (y < 0 || y > 300) {
            dy = -dy;
            color = get_random_color();
        }
        x += dx;
        y += dy;
    }
    setInterval(draw, 10);
}

函数get\u random\u color（）{ 变量字母='ABCDE'。拆分（''）； var color='#'；

---

for（var i=0；i应该像在球碰到墙时调用函数一样直接，如下所示

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

function myFunction() {
    var context;
    var dx = 4;
    var dy = 4;
    var y = 150;
    var x = 10;
    var color = get_random_color();

    function draw() {
        context = myCanvas.getContext('2d');
        context.clearRect(0, 0, 400, 400);
        context.beginPath();
        context.fillStyle = color;
        context.arc(x, y, 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
        if (x < 0 || x > 400) {
            dx = -dx;
            color = get_random_color();
        }
        if (y < 0 || y > 300) {
            dy = -dy;
            color = get_random_color();
        }
        x += dx;
        y += dy;
    }
    setInterval(draw, 10);
}

函数myFunction（）{
var语境；
var-dx=4；
var-dy=4；
变量y=150；
var x=10；
var color=get_random_color（）；
函数绘图（）{
context=myCanvas.getContext（'2d'）；
clearRect（0,040400）；
context.beginPath（）；
context.fillStyle=颜色；
弧（x，y，10，0，Math.PI*2，真）；
closePath（）；
context.fill（）；
如果（x<0 | | x>400）{
dx=-dx；
颜色=获取随机颜色（）；
}
如果（y<0 | | y>300）{
dy=-dy；
颜色=获取随机颜色（）；
}
x+=dx；
y+=dy；
}
设置间隔（抽签，10）；
}

---

谢谢。在您发布此内容之前，我已将其运行。已找到context.fillStyle属性。