Javascript和HTML5，修改现有渐变

我正试图编写一个小型客厅应用程序，特别是为了避免用户需要安装Java、flash或shockwave。我在颜色选择器中遇到了一些渐变问题

具体来说，问题似乎是我无法找到一种方法来正确清除和重新启动渐变。 我正在做一个三行（目前为3画布原型）RGB渐变，类似于SAI绘制工具和其他绘图程序，当更新/修改渐变时，它不会以我期望的方式更新，结果是“牵引杆”显示与输出相比不正确的颜色

我使用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);
            }
        }

函数sendUpdate（p，p2，p3）//将更新发送到彩色条。
{
//变量id；
var-p；
cr.beginPath（）；
rbg.addColorStop（0，#00“+hxb+hxc）；/00黑色
rbg.addColorStop（1，“#FF”+hxb+hxc）；//FF 00亮红色
cr.rect（0，0，r.宽度，r.高度）；
cr.fillStyle=rbg；
cr.fill（）；
cr.closePath（）；
//指示器
cr.beginPath（）；
cr.rect（p-2,1,3,6）；
cr.线宽=1；
cr.strokeStyle=“#e0”；
cr.中风（）；
cr.closePath（）；
cg.beginPath（）；
重心矩形（0，0，g.宽度，g.高度）；
gbg.addColorStop（0，#“+hxa+“00”+hxc）；//FF 00 00亮红色。
gbg.addColorStop（1，“#”+hxa+“FF”+hxc）；//FF FF 00黄色
cg.fillStyle=gbg；
cg.fill（）；
cg.closePath（）；
cg.beginPath（）；
cg.rect（p2-2,1,3,6）；
cg.线宽=1；
cg.strokeStyle=“#e0”；
cg.stroke（）；
cg.closePath（）；
cb.beginPath（）；
cb.rect（0，0，b.宽度，b.高度）；
bbg.addColorStop（0，#“+hxa+hxb+“00”）；FF 00亮红色
bbg.addColorStop（1，“#”+hxa+hxb+“FF”）；//FF 00 FF粉色/紫色
cb.fillStyle=bbg；
cb.fill（）；
cb.closePath（）；
cb.beginPath（）；
cb.rect（p3-2,1,3,6）；
cb.线宽=1；
cb.strokeStyle=“#e0”；
cb.stroke（）；
cb.closePath（）；
document.getElementById（“colorIndicator”）.style.backgroundColor=clr；
}
函数链接（id，x，p）//获取id（哪个色条）的0-255值和位置0-170值并更新颜色！使用此选项初始化或调用！
{
var x；
var-p；
如果（x我认为你需要“重新启动”你的渐变，就像你在一个已经创建的渐变上添加颜色步骤一样，它们不会覆盖已经创建的渐变

尝试在函数开始时将rbg对象置零，然后再次创建渐变对象
谢谢！这很有效。我在标题中初始化了一个空变量，在函数中调用createLinearGradient，并在其上添加了一个置零，因此每次调用它时都会在重构变量之前删除该变量。现在它混合并表现为正如预期的那样。