Generowanie koloru i dodawanie do array Opcje

[soliniak]

Mam taki oto kod i chciałbym żeby każdy z narysowanych pasków miał kolor o jeden stopień wyższy.
Próbowałem zrobić to w arrayu ale nie wiem jak wyodrębnić kolory... (uczę się (IMG:style_emoticons/default/wink.gif) )
Za pomoc z góry dziękuję (IMG:style_emoticons/default/wink.gif)

https://jsfiddle.net/ta2z06fq/

[JAVASCRIPT] pobierz, plaintext 
function rysuj(){
  draw();
  cooler();
}
 
function draw(){
var canvas = document.getElementById("canvas");
 
var ctx = canvas.getContext("2d");
var rgb = 255;
var rgb2 = 0;
var rgb3 = 0;
var rgbit = false;
var rgbitmin = false;
var rgb2it = false;
var rgb2itmin = false;
var rgb3it = false;
var rgb3itmin = false;
var speed = 2;
 
this.cooler = function(){
 
if (rgb == 255 && rgb2 === 0 && rgb3 === 0){
  rgb2it = true;
}
  if(rgb2it === true){
  rgb2++;
    if(rgb2 >= 255){
      rgb2it = false;
    }
  }
 
if (rgb == 255 && rgb2 === 255 && rgb3 === 0){
  rgbitmin = true;
} 
  if(rgbitmin === true){
    --rgb;
    if(rgb <= 0){
      rgbitmin = false;
    }
  }
 
if (rgb === 0 && rgb2 == 255 &&  rgb3 === 0){
  rgb3it = true;
}
  if(rgb3it === true){
  rgb3++;
    if(rgb3 >= 255){
      rgb3it = false;
    }
  }
 
if (rgb === 0 && rgb2 === 255 && rgb3 == 255){
  rgb2itmin = true;
} 
  if(rgb2itmin === true){
    --rgb2;
    if(rgb2 <= 0){
      rgb2itmin = false;
    }
  }
if (rgb === 0 && rgb2 === 0 &&  rgb3 == 255){
  rgbit = true;
}
  if(rgbit === true){
  rgb++;
    if(rgb >= 255){
      rgbit = false;
    }
  } 
if (rgb == 255 && rgb2 === 0 && rgb3 == 255){
  rgb3itmin = true;
} 
  if(rgb3itmin === true){
    --rgb3;
    if(rgb3 <= 0){
      rgb3itmin = false;
    }
  }
 
  setTimeout(cooler, speed);
 
  document.getElementById("r").innerHTML = rgb;
  document.getElementById("g").innerHTML = rgb2;
  document.getElementById("b").innerHTML = rgb3;
 
  toto = [rgb, rgb2, rgb3];
  kolor = [];
  kolor.push("rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")");
 
  //ctx.fillStyle = "rgb("toto[0]+","+toto[1]+","+toto[2]+");";
  document.getElementById("kolor").style.background = "rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")";
 
  var a = 20;
  var rH = 70;
  var rX = 15;
 
  for (i = 0; i < 10; i++){
  a += 20;
  ctx.fillStyle = kolor[i];
  ctx.fillRect(a, 10, rX, rH+i*2);
  }
 
};
 
}
 
rysuj();
[JAVASCRIPT] pobierz, plaintext 

[soliniak]

A co zrobić żeby na stałe przypisać wartość do tablicy?
Teraz za każdym razem jak wywołam w konsoli

kolor[6]
to zwraca mi różne wartości tj.:

[JAVASCRIPT] pobierz, plaintext 
kolor[6]
"rgb(0,255,45)"
kolor[6]
"rgb(165,255,0)"
kolor[6]
"rgb(255,0,135)"
[JAVASCRIPT] pobierz, plaintext 

A chciałbym żeby za każdym razem kolor[6] zwracał mi swoją jedną stałą wartość.

I jeszcze jedna kwestia, nie mogę wypisać więcej niż 13 prostokątów i nie rozumiem dlaczego. Zwiększam wartość j oraz i ale maks to 13 :/

Ten post edytował soliniak 9.11.2016, 11:05:02

[rafkon1990]

A co zrobić żeby na stałe przypisać wartość do tablicy?

Możesz utworzyć drugą tablicę (globalną) i tam dodawać wszystkie wygenerowane kolory rgb (szybko zapcha dostępną pamięć).

Teraz za każdym razem jak wywołam w konsoli

kolor[6]
to zwraca mi różne wartości tj.:

[JAVASCRIPT] pobierz, plaintext 
kolor[6]
"rgb(0,255,45)"
kolor[6]
"rgb(165,255,0)"
kolor[6]
"rgb(255,0,135)"
[JAVASCRIPT] pobierz, plaintext 

A chciałbym żeby za każdym razem kolor[6] zwracał mi swoją jedną stałą wartość.

Potrzebujesz tablicy o zasięgu globalnym, bądź przekazywać ją do funkcji.

I jeszcze jedna kwestia, nie mogę wypisać więcej niż 13 prostokątów i nie rozumiem dlaczego zwiększam wartość j oraz i ale maks to 13 :/

Ależ możesz mieć więcej niż 13 takich prostokątów - wystarczy że zwiększysz szerokość obszaru canvas.