{"id":243,"date":"2012-11-15T20:20:29","date_gmt":"2012-11-15T18:20:29","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=243"},"modified":"2015-04-08T08:56:52","modified_gmt":"2015-04-08T06:56:52","slug":"canvas-javascript-gradient-hsv","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/canvas-javascript-gradient-hsv\/","title":{"rendered":"[canvas][javascript] Gradient HSV – pe\u0142en zakres kolor\u00f3w"},"content":{"rendered":"

\"Zaznaczenie_004\"<\/a>
\nModel HSV nawi\u0105zuje do sposobu, w jakim widzi ludzki narz\u0105d wzroku, gdzie wszystkie barwy postrzegane s\u0105 jako \u015bwiat\u0142o pochodz\u0105ce z o\u015bwietlenia. Wed\u0142ug tego modelu wszelkie barwy wywodz\u0105 si\u0119 ze \u015bwiat\u0142a bia\u0142ego, gdzie cz\u0119\u015b\u0107 widma zostaje wch\u0142oni\u0119ta a cz\u0119\u015b\u0107 odbita od o\u015bwietlanych przedmiot\u00f3w.<\/p>\n

H \u2013 odcie\u0144 \u015bwiat\u0142a (ang. Hue) wyra\u017cona k\u0105tem na kole barw przyjmuj\u0105ca warto\u015bci od 0\u00b0 do 360\u00b0;
\nS \u2013 nasycenie koloru jako promie\u0144 podstawy (warto\u015bci od 0 do 1);
\nV \u2013 moc \u015bwiat\u0142a bia\u0142ego (warto\u015bci od 0 do 1)<\/p>\n

Tyle teorii, jak narysowa\u0107 pe\u0142en zakres kolor\u00f3w HSV (t\u0119cza) w CANVAS?<\/strong>
\n<\/p>\n

W pierwszej kolejno\u015bci potrzebna nam b\u0119dzie funkcja zamieniaj\u0105ca kolor HSV na RGB, kt\u00f3ry mo\u017ce by\u0107 u\u017cyty w generowaniu grafiki (javascript “nie rozumie” kolor\u00f3w w formacie HSV):<\/p>\n

[php]
\n<script type="text\/javascript">
\nfunction hsvToRgb(h, s, v){
\n var r, g, b;
\n\u00a0 \u00a0 if (s == 0){
\n\u00a0 \u00a0 \u00a0 \u00a0 r = v;g = v;b = v;
\n \treturn {r:Math.round(r * 255), g:Math.round(g * 255), b:Math.round(b * 255)};
\n\u00a0 \u00a0 }
\n\u00a0 \u00a0 h \/= 60;
\n\u00a0 \u00a0 var i \u00a0= Math.floor(h);
\n\u00a0 \u00a0 var f = h – i;
\n\u00a0 \u00a0 var p = v * \u00a0(1 – s);
\n\u00a0 \u00a0 var q = v * (1 – s * f);
\n\u00a0 \u00a0 var t = v * (1 – s * (1 – f));
\n\u00a0 \u00a0 switch( i ) {
\n\u00a0 \u00a0 \u00a0 \u00a0 case 0: r = v; \u00a0 g = t; \u00a0 b = p; break;
\n\u00a0 \u00a0 \u00a0 \u00a0 case 1: \u00a0 r = q; g = v; b = p; break;
\n\u00a0 \u00a0 \u00a0 \u00a0 case 2: \u00a0 r = p; \u00a0 g = v; \u00a0 b = t; break;
\n\u00a0 \u00a0 \u00a0 \u00a0 case 3: \u00a0 r = p; \u00a0 g = q; b = v; \u00a0 break;
\n\u00a0 \u00a0 \u00a0 \u00a0 case 4: \u00a0 r = t; g = p; \u00a0 b = v; break;
\n\u00a0 \u00a0 \u00a0 \u00a0 default:\u00a0 \u00a0 r = v; g = p; b = q; \u00a0 break;
\n\u00a0 \u00a0 }
\n return {r:Math.round(r * 255), g:Math.round(g * 255), b:Math.round(b * 255)};
\n}\/\/——————————–
\n<\/script>
\n[\/php]<\/p>\n

Czas przygotowa\u0107 obszar roboczy – np. o wymiarach 360 x 100 px<\/strong>, tak aby ka\u017cda barwa (stopnie\u0144 obrotu – warto\u015b\u0107 H) mia\u0142a swoj\u0105 reprezentacje na grafice. Nast\u0119pnie w p\u0119tli przegl\u0105damy wszystkie kolory HSV zgodnie z zasad\u0105:
\nH – od 0 do 360
\nS = 1
\nV = 1<\/p>\n

Tak wi\u0119c p\u0119tla b\u0119dzie mie\u0107 360 iteracji a w ka\u017cdej b\u0119dzie generowany kolor RGB odpowiadaj\u0105cy kolejnym stopniom (parametr H) koloru HSV.<\/p>\n

Do rysowania kolor\u00f3w wykorzystamy standardow\u0105 funkcj\u0119 CANVAS – createLinearGradient<\/strong>, co pozwoli ograniczy\u0107 liczb\u0119 operacji w p\u0119tli z 360 do 72 – pr\u00f3bkowanie koloru b\u0119dzie nast\u0119powa\u0107 co 5 pikseli, pozosta\u0142e miejsce wype\u0142ni za nas funkcja, tworz\u0105c gradient.<\/p>\n

[php]
\n<canvas id="bitmap" width="360" height="100">brak obslugi canvas<\/canvas>
\n<script type="text\/javascript">
\nvar bitmap = document.getElementById(‘bitmap’);
\nif ( ! bitmap.getContext) { alert(‘brak obslugi getContent’); return false; }
\nvar c = bitmap.getContext(‘2d’);
\nvar rgb;
\nc.beginPath(); \/\/1
\ngrad = c.createLinearGradient(0, 0, 360, 0); \/\/ 1
\nfor (i=0;i<=360;i+=5) {
\n\trgb = hsvToRgb(i, 1, 1);
\n\tgrad.addColorStop(i\/360, "rgb("+rgb.r+", "+rgb.g+","+rgb.b+")");
\n}
\nc.fillStyle = grad;
\nc.fillRect(0, 0, 360, 100);
\nc.stroke(); \/\/1
\n<\/script>
\n[\/php]<\/p>\n

Rezultat:<\/p>\n

\n brak obslugi canvas<\/canvas>\n<\/div>\n