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]

Zobacz ten kod.

Wypełniam tablicę kolor 10 elementami (w pierwszej pętli) i później z nich korzystam w drugiej pętli rysując prostokąty.

Kod

    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 = 200;
        
        this.cooler = function(){
        kolor = [];
            for(j=0; j<10; j++){
                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;
                    }
                }
                
                
                
                document.getElementById("r").innerHTML = rgb;
                document.getElementById("g").innerHTML = rgb2;
                document.getElementById("b").innerHTML = rgb3;
                
                
                kolor.push("rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")");
            }
            
            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];
                document.getElementById("rgb"+i).innerHTML = kolor[i];
                ctx.fillRect(a, 10, rX, rH+i*2);
            }
            
            setTimeout(cooler, speed);
            
        };
        
    }

    rysuj();

Odcienie różnią się o 1 wartość r/g/b zatem jest to prawie niezauważalne (zalecam zwiększenie różnicy do najmniej 5).

Ten post edytował rafkon1990 9.11.2016, 10:03:03