每次反弹时如何改变球的颜色？

Question

I just saw this question ball bounce while searching for some JavaScript code. Its easy code but what to do if we want to change the color randomly of the ball every time it bounces off the wall.

My thoughts:

Have a random color generator and use it. Something like this

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;
}

But how to change the color of the ball. I tried context.fill() but no help

Answer 1

Should be as straight forward as calling the function when the ball hits a wall, like this

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);
}

FIDDLE