HSVカラーバーを描く


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント for (S=0; S<1; S+=0.05) writeBar(H,S,1); for (V=0; V<1; V+=0.05) writeBar(H,1,1-V); function writeBar(Hx,Sx,Vx) { HSVtoRGB(Hx,Sx,Vx); r = Math.floor(r * 255).toString(16); g = Math.floor(g * 255).toString(16); b = Math.floor(b * 255).toString(16); if (r.length < 2) r = "0" + r; if (g.length < 2) g = "0" + g; if (b.length < 2) b = "0" + b; c = "#"+r+g+b; document.write("<td bgcolor='"+c+"'><img src='chip.gif' width='4' height='4'></td>"); }
説  明 HSVカラーバーを描くには■変換のHSVからRGBに変換する式を使いS(彩度)とV(強度)を変化させdocument.write()を使ってタグごと書き出します。書き出す際にtdタグのbgcolorで色を指定、セル内には透過gif画像を表示することでカラーバーを描くことができます。
サンプル <html> <head> <title>HSVカラーバーを描く</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <script language="JavaScript"><!-- r = g = b = 0; function HSVtoRGB(h,s,v) { r = g = b = 0; if (s < 0) s = 0; if (s > 1) s = 1; if (v < 0) v = 0; if (v > 1) v = 1; h = h % 360; if (h < 0) h = h + 360; h = h / 60; i = Math.floor(h); f = h - i; p1 = v * (1 - s); p2 = v * (1 - s*f); p3 = v * (1 - s*(1 - f)); if (i == 0) { r = v; g = p3; b = p1; } if (i == 1) { r = p2;g = v; b = p1; } if (i == 2) { r = p1;g = v; b = p3; } if (i == 3) { r = p1;g = p2; b = v; } if (i == 4) { r = p3;g = p1; b = v; } if (i == 5) { r = v; g = p1; b = p2; } } function writeBar(Hx,Sx,Vx) { HSVtoRGB(Hx,Sx,Vx); r = Math.floor(r * 255).toString(16); g = Math.floor(g * 255).toString(16); b = Math.floor(b * 255).toString(16); if (r.length < 2) r = "0" + r; if (g.length < 2) g = "0" + g; if (b.length < 2) b = "0" + b; c = "#"+r+g+b; document.write("<td bgcolor='"+c+"'><img src='chip.gif' width='4' height='4'></td>"); } for (H=0; H<360 ; H+=10) { document.write("<tr>"); for (S=0; S<1; S+=0.05) writeBar(H,S,1); for (V=0; V<1; V+=0.05) writeBar(H,1,1-V); document.write("</tr>"); } // --></script> </table> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA