HTML5 Canvas color help

Question

Привет, у меня есть этот простой массив внутри моей переменной с некоторыми цветами

var clr = ['#FF0000', '#0000FF', '#FFFF00', '#008000', '#FFA500', '#800080', '#ffffff'];

и затем функция, которая должна возвращать одно из этих значений в одинарных кавычках

function colors() {
    var color;
    color = "'";
    color += Math.floor(Math.random() * clr.length);
    color += "'";
    return color;
}

эта функциязатем вызывается, чтобы показать различные цветные шары

function CreateBall(x, y, vx, vy, r, s) {
    this.color = colors();
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.r = r;
    this.size = s;
}

Однако это не работает?Любые идеи почему?

Чтобы увидеть полный код, пожалуйста, посмотрите на источник здесь: http://dev.driz.co.uk/pool

Answer 1

В настоящее время значение, возвращаемое из colors(), представляет собой строку, которая выглядит примерно как "'#ffffff'".Когда это значение цвета фактически применяется, в следующей строке выдается синтаксическая ошибка:

122: gradient.addColorStop(.85, ball[i].color);

Это может быть вызвано одинарными кавычкамиперебираем возвращаемый цвет - вам не нужно это делать, так как это уже строковое значение.Вы также никогда не извлекаете значения из своего массива.Используйте это для вашей colors() функции:

function colors() 
{
    return cls[Math.floor(Math.random() * clr.length)];
}

Answer 2

Это должно решить вашу проблему

function colors() {
    return clr[Math.floor(Math.random() * clr.length)];
}

Демо