Javascript 和 HTML5，修改现有渐变

Question

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

具体来说，问题似乎是我找不到正确清除和重新启动渐变的方法。 我正在做一个类似于 SAI Paint 工具和其他绘图程序的三线(目前是 3 Canvas 原型(prototype))R G B 渐变，并且在更新/修改渐变时它不会按照我期望的方式更新，结果是 '与输出相比，drawbar' 显示的颜色不正确。

我正在使用 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 的新手，我无法自己解决这个问题。我已经阅读了有关 Canvas 渐变的 W3 部分和功能描述。此处找到的一些颜色选择器和色轮解决方案可能会在以后对我有所帮助，但它们似乎都没有提到我实际重复更新渐变的问题。

addColorStop 后面的注释是我想要的输出，如果用户选择了颜色 FF0000，留下渐变以显示用户可以实现的混合颜色。 哦，在此版本中，创建渐变是在函数外部调用的。

Answer 1

我认为您需要“重新启动”您的渐变，就好像您在已经创建的渐变上添加颜色步骤一样，它们不会覆盖它已经拥有的那些。

尝试在函数开始时使您的 rbg 对象无效并再次创建渐变对象