私は小さな応接室アプリケーションを作成しようとしています。特に、ユーザーが Java、フラッシュ、または Shockwave をインストールする必要がないようにするためです。また、カラーピッカーのグラデーションに問題があります。
具体的には、グラデーションを適切にクリアして再開する方法が見つからないことが問題のようです。SAIペイントツールや他の描画プログラムと同様の3行（現在は3キャンバスプロトタイプ）のRGBグラデーションを実行していますが、グラデーションを更新/変更すると、期待どおりに更新されず、結果は '出力と比較して正しくない色を表示するドローバー。
addColorStop() を使用してグラデーションを更新していますが、取得しているのは、オフセットを置き換えるのではなく、オフセットをプッシュしているようなものです。
function sendUpdate(p, p2, p3) //sends update to colour bars.
{
// var id;
var p;
cr.beginPath();
rbg.addColorStop(0, "#00" + hxb + hxc ); //00 00 00 black
rbg.addColorStop(1, "#FF" + hxb + hxc ); //FF 00 00 bright red
cr.rect(0, 0, r.width, r.height);
cr.fillStyle = rbg;
cr.fill();
cr.closePath();
//indicator
cr.beginPath();
cr.rect(p - 2, 1, 3, 6);
cr.lineWidth = 1;
cr.strokeStyle = "#E0E0E0";
cr.stroke();
cr.closePath();
cg.beginPath();
cg.rect(0, 0, g.width, g.height);
gbg.addColorStop(0, "#" + hxa + "00" + hxc ); //FF 00 00 bright red.
gbg.addColorStop(1, "#" + hxa + "FF" + hxc ); //FF FF 00 yellow
cg.fillStyle = gbg;
cg.fill();
cg.closePath();
cg.beginPath();
cg.rect(p2 - 2, 1, 3, 6);
cg.lineWidth = 1;
cg.strokeStyle = "#E0E0E0";
cg.stroke();
cg.closePath();
cb.beginPath();
cb.rect(0, 0, b.width, b.height);
bbg.addColorStop(0, "#" + hxa + hxb + "00" ); //FF 00 00 bright red
bbg.addColorStop(1, "#" + hxa + hxb + "FF" ); //FF 00 FF pink/purple
cb.fillStyle = bbg;
cb.fill();
cb.closePath();
cb.beginPath();
cb.rect(p3 - 2, 1, 3, 6);
cb.lineWidth = 1;
cb.strokeStyle = "#E0E0E0";
cb.stroke();
cb.closePath();
document.getElementById("colourIndicator").style.backgroundColor=clr;
}
function link(id, x, p) //takes id(which colourbar) 0-255 value and position 0-170 value and UPDATES COLOUR! Use this to initialize or call!
{
var x;
var p;
if (x <= 255)
{
switch(id)
{
case 0:
hxa = toHex(x);
if (hxa.length == 1) { hxa = "0" + hxa; }
clr = "#" + hxa + hxb + hxc;
document.getElementById("debugc").innerHTML="case0 output: " + hxa + hxb + hxc;
pos1 = p;
sendUpdate(p, pos2, pos3);
break;
case 1:
hxb = toHex(x);
if (hxb.length == 1) { hxb = "0" + hxb; }
clr = "#" + hxa + hxb + hxc;
document.getElementById("debugc").innerHTML="case1 output: " + hxa + hxb + hxc;
pos2 = p;
sendUpdate(pos1, p, pos3);
break;
case 2:
hxc = toHex(x);
if (hxc.length == 1) { hxc = "0" + hxc; }
clr = "#" + hxa + hxb + hxc;
document.getElementById("debugc").innerHTML="case2 output: " + hxa + hxb + hxc;
pos3 = p;
sendUpdate(pos1, pos2, p);
break;
}
}
else
{
x = 255;
p = 170;
link(id, x, p);
}
}
私はJavaScriptにかなり慣れていないので、自分でこれを理解することができませんでした。キャンバスのグラデーションに関する W3 セクションと関数の説明を読みました。ここで見つかったカラー ピッカーとカラー ホイールのソリューションのいくつかは後で役立つかもしれませんが、グラデーションを実際に繰り返し更新するという問題について言及しているようには見えませんでした。
addColorStop の背後にあるコメントは、ユーザーが色 FF0000 を選択した場合に必要な出力であり、ユーザーが達成できる混合色を表示するグラデーションを残します。ああ、このバージョンでは create gradient は関数の外で呼び出されます。