“Javascript随机颜色”；“球”；工作不正常

我有这个项目，我正在工作，需要有这个“球”是一个随机颜色从启动。我可以生成随机颜色，但是球在屏幕上的整个过程中不断生成新颜色。我只需要每个球是一个随机的颜色。救命啊？！我只是一个入门的学生，所以我知道的还不多！这是我目前的代码：

 var context;
 var x = Math.floor(450 * Math.random() + 1);
 var y = 0;
 var dx = 0;
 var dy = 2;
 var xx = 200;

 function startGame() {
     context = myCanvas.getContext('2d');
     setInterval('drawEverything()', 50);
 }

 function drawEverything() {
     drawCircle();
     drawRectangle();
 }

 function drawCircle() {
     context.clearRect(0, 0, 450, 300);
     context.beginPath();
     context.arc(x, y, 10, 0, Math.PI * 2);
     context.closePath();
     context.fillStyle = getRandomColor();
     context.fill();

     x += dx;
     y += dy;

 }

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

var上下文；
var x=数学地板（450*Math.random（）+1）；
var y=0；
var-dx=0；
var-dy=2；
var xx=200；
函数startName（）{
context=myCanvas.getContext（'2d'）；
setInterval（'Drawerything（）'，50）；
}
函数drawerything（）{
画圈（）；
drawRectangle（）；
}
函数drawCircle（）{
clearRect（0,0450300）；
context.beginPath（）；
弧（x，y，10，0，Math.PI*2）；
closePath（）；
context.fillStyle=getRandomColor（）；
context.fill（）；
x+=dx；
y+=dy；
}
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}

最好的方法是制作一个圆形对象。您可以在首次创建对象时设置对象的颜色，并且这种颜色永远不会更改。每次绘制圆时，都会更新圆的位置。这样，您可以拥有多个圆形对象，每个对象都具有不同的随机颜色。下面是我尝试的两个圆圈（未经测试，因此请小心处理！）

var圈1；
var circle2；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数圆（）{
this.context=myCanvas.getContext（'2d'）；
this.color=getRandomColor（）；
this.x=Math.floor（450*Math.random（）+1）；
这个。y=0；
该值为0.dx=0；
这1.dy=2；
这是0.xx=200；
}
函数Circle.prototype.draw（）{
this.context.clearRect（0,0450300）；
this.context.beginPath（）；
this.context.arc（this.x，this.y，10,0，Math.PI*2）；
this.context.closePath（）；
this.context.fillStyle=this.color；
this.context.fill（）；
this.x+=this.dx；
this.y+=this.dy；
}
函数drawerything（）
{
圆圈1.draw（）；
圆圈2.draw（）；
}
函数startName（）
{
圆圈1=新圆圈（）；
圆圈2=新圆圈（）；
设置间隔（抽屉式，50）；
}

---

此处

new Circle（）

创建一个新的圆对象，在

startGame

函数中，每个圆只调用一次。每个圆都是使用其

draw

方法绘制的，在

drawerything

函数中对两个圆连续调用该方法。绘制方法定义中的

原型

意味着我们可以共享不同圆的代码，但圆本身可以有不同的值（圆函数中的

此

，绘制方法指的是当前圆对象）。有关JavaScript中面向对象的介绍，请参阅。

您是否尝试过将颜色存储在函数外部定义的变量中，就像您使用

x

和

y

所做的那样？然后从

startGame（）

函数内部设置颜色一次。@nnnn是正确的。由于“Drawerything（）”以50的间隔执行，因此每次都将使用新颜色渲染球，因为“Drawerything（）”将使用新颜色生成新球。将颜色存储在函数外部的变量中，然后颜色将保持不变。

var myRanColor =  getRandomColor();
function drawCircle()
{   
context.clearRect(0,0,450,300); 
context.beginPath(); 
context.arc(x,y,10,0,Math.PI*2);
context.closePath();
context.fillStyle=myRanColor;
context.fill(); 

x+=dx; 
y+=dy; 

}

var circle1;
var circle2;

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

function Circle() {
    this.context = myCanvas.getContext('2d');
    this.color = getRandomColor();
    this.x = Math.floor(450 * Math.random() + 1); 
    this.y = 0; 
    this.dx = 0; 
    this.dy = 2; 
    this.xx = 200; 
}

function Circle.prototype.draw () {
    this.context.clearRect(0, 0, 450, 300); 
    this.context.beginPath(); 
    this.context.arc(this.x, this.y, 10, 0, Math.PI*2);
    this.context.closePath();
    this.context.fillStyle = this.color; 
    this.context.fill();

    this.x += this.dx;
    this.y += this.dy;
}

function drawEverything()
{
    circle1.draw();
    circle2.draw();
}

function startGame()
{
    circle1 = new Circle();
    circle2 = new Circle();
    setInterval(drawEverything,50);
}