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 

[rafkon1990]

zdaje się że w pętli nic nie zmieniasz stąd też taki efekt

czy chodzi ci o taki efekt?

Kod

Edit in JSFiddle
JavaScript
HTML
CSS
Result
function rysuj(){
  draw();
  cooler();
}

function draw(){
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");
var dec = 9;
var paskow = 10;
var limit = 255-(dec*paskow);
var r = limit;
var g = 0;
var b = 0;
var rit = false;
var ritmin = false;
var git = false;
var gitmin = false;
var bit = false;
var bitmin = false;
var speed = 20;
  
this.cooler = function(){

if (r == limit && g === 0 && b === 0){
  git = true;
}
  if(git === true){
  g++;
    if(g >= limit){
      git = false;
    }
  }
  
if (r == limit && g === limit && b === 0){
  ritmin = true;
}
  if(ritmin === true){
    --r;
    if(r <= 0){
      ritmin = false;
    }
  }
  
if (r === 0 && g == limit &&  b === 0){
  bit = true;
}
  if(bit === true){
  b++;
    if(b >= limit){
      bit = false;
    }
  }

if (r === 0 && g === limit && b == limit){
  gitmin = true;
}
  if(gitmin === true){
    --g;
    if(g <= 0){
      gitmin = false;
    }
  }
if (r === 0 && g === 0 &&  b == limit){
  rit = true;
}
  if(rit === true){
  r++;
    if(r >= limit){
      rit = false;
    }
  }
if (r == limit && g === 0 && b == limit){
  bitmin = true;
}
  if(bitmin === true){
    --b;
    if(b <= 0){
      bitmin = false;
    }
  }
  
  setTimeout(cooler, speed);
  
  document.getElementById("r").innerHTML = r;
  document.getElementById("g").innerHTML = g;
  document.getElementById("b").innerHTML = b;
  

  document.getElementById("kolor").style.background = rgb;
  
  var a = 20;
  var rH = 70;
  var rX = 15;

  for (i = 0; i < paskow; i++){
  a += 20;
  var rgb = ("rgb(" + (r+i*dec) + "," + (g+i*dec) + "," + (b+i*dec) + ")");
   document.getElementById("kolor").style.background = rgb;
  ctx.fillStyle = rgb
  document.getElementById("rgb").innerHTML = rgb;
  ctx.fillRect(a, 10, rX, rH+i*2);
  }

};
  
}

rysuj();

var dec = 9;
POLSKI
var grudnia = 9;
OPCJE ROZSZERZEŃWIĘCEJ »

Ten post edytował rafkon1990 9.11.2016, 09:34:13