Javascript CSS3：每次球从帆布墙上反弹时，更改球的颜色

我必须用HTML5/CSS3创建一个球类游戏。因为可以看到同样的情况

现在我想要的是每次球从墙上反弹时改变球的颜色

var上下文；
var-dx=4；
var-dy=4；
变量y=150；
var x=10；
函数绘图（）{
context=myCanvas.getContext（'2d'）；
clearRect（0,03000）；
context.beginPath（）；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
如果（x<0 | | x>300）
dx=-dx；
如果（y<0 | | y>300）
dy=-dy；
x+=dx；
y+=dy；
}
设置间隔（抽签，10）
#容器{
文本对齐：居中；
}
#我的画布{
背景：#fff；
边框：1px实心#cbcbcb；
文本对齐：居中；
}
随机颜色函数来自这里：

这将使它在每次反弹时都发生变化


var上下文；
var-dx=4；
var-dy=4；
变量y=150；
var x=10；
函数绘图（）{
context=myCanvas.getContext（'2d'）；
clearRect（0,0300）；
context.beginPath（）；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
如果（x300）{
dx=-dx；
context.fillStyle=getRandomColor（）；
}
如果（y300）{
dy=-dy；
context.fillStyle=getRandomColor（）；
}
x+=dx；
y+=dy；
}
设置间隔（抽签，10）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
CSS无法实现这一点。您必须更改JS中的填充颜色（如
context.fillStyle='red'
），因为球是画布绘制的。如何操作？我的意思是每一次填充都会产生随机的颜色。你能说得更清楚些吗？我在这里试过，似乎效果很好：我想我实际上错了，但这很有趣；-）去调查。@Amit ok如果真的有什么问题，请告诉我；）@无处验证，您的解决方案是可靠的。我担心（实际上是假设）调用
getContext（）
每次都会返回一个新对象，而这个新对象不会保持以前的样式。我要说的是，它必须返回相同的对象，因此将保持样式。
var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
    context= myCanvas.getContext('2d');
    context.clearRect(0,0,300,300);
    context.beginPath();
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    if( x<0 || x>300){
        dx=-dx;
        context.fillStyle = getRandomColor();
    }
    if( y<0 || y>300){
        dy=-dy;
        context.fillStyle = getRandomColor();
    }
        x+=dx;
        y+=dy;

}
setInterval(draw,10); 


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}