Javascript和HTML5，修改現有的漸變

我正在嘗試編寫一個小型繪圖室應用程序，專門用於避免需要安裝Java，Flash或Shockwave的用戶。而且我在顏色選擇器中遇到了一些漸變問題。Javascript和HTML5，修改現有的漸變

具體而言，問題似乎是我無法找到正確清除和重新啓動漸變的方法。我正在做一個類似於SAI Paint工具和其他繪圖程序的三行（當前爲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，則讓漸變顯示用戶可以實現的混合顏色。哦，創建梯度在此版本的函數之外被調用。

來源

2012-10-01 Vivix

我認爲你需要「重新啓動」你的漸變，就像你在已經創建的漸變上添加顏色步驟一樣，它們將不會覆蓋已有的漸變。

嘗試在函數的開始處取消您的rbg對象並再次創建漸變對象

來源

2012-10-01 07:17:34 Bardo

謝謝！這是有效的。我在頭文件中初始化了一個空變量，並在函數內部調用了createLinearGradient，並在它上面添加了一個空值，所以每次調用它時都會在重構之前刪除變量。現在它按預期混合並行爲。 – Vivix

Javascript和HTML5，修改現有的漸變

回答

相關問題