| ポイント |
<![CDATA[
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画像を表示することでカラーバーを描くことができます。 |
| サンプル |
<![CDATA[
<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!
|
HSVカラーバーを描く