如何創建滑塊來更改顏色？

本質上，我試圖取一個值，由接口上的滑塊定義，通過數組傳遞該值以選擇一種顏色，並將該顏色傳遞給包含fill.style的函數。如何創建滑塊來更改顏色？

我有一個粗略的想法去做這件事，但它在這個階段不工作。

下手，我在我的HTML創建一個滑塊：

<p id="attribute">Color Slider</p> 
<span id="sliderColor">2</span> 
<input type="range" min="0" max="3" value="2" step="1" onchange="sliderChangeColor(this.value)"/> 
     <br /> <br />

我不知道從哪裏開始這種顏色的功能。我想像它會是這樣的......

var colourChange = [(132,0,0), (132,0,132), (189,189,0)];

鋪設3種不同顏色出數組

function sliderColorChange (value) { 
       document.getElementById('sliderHeight').innerHTML = value; 
       flakeColor = +value; // + will convert the string to number 
      } 
     }

通過傳遞滑塊值到fill.Style

function blank() { 
      bufferCanvasCtx.fillStyle = colorChange; 
     }

在這個階段這可能是完全錯誤的，所以任何幫助形式的解決方案或鏈接到一個可能有用的資源將非常感謝！

來源

2015-04-28 Sam Mcleod

http://jsfiddle.net/xGAJ8/這將值得inpsecting

<div id="mydiv" style="border:1px solid black;width:200px;height:100px;"></div></br> 
<div style="background-color:black;color:white;display:inline-block;background-color:red;"> 
red:<input type="range" min="0" max="255" value="0" step="1" onChange="changeColor(this.value, 0);"></br> 
green:<input type="range" min="0" max="255" value="0" step="1" onChange="changeColor(this.value, 1);"></br> 
blue:<input type="range" min="0" max="255" value="0" step="1" onChange="changeColor(this.value, 2);"></br> 
alpha:<input type="range" min="0" max="1" value="0" step="0.01" onChange="changeColor(this.value, 3);"></br> 
</div>

和JS

var red=0; 
var green=0; 
var blue=0; 
var alpha=0; 
var m = document.getElementById("mydiv"); 
function changeColor(val,color){ 
    switch (color) { 
     case 0: red = val; break; 
     case 1: green = val; break; 
     case 2: blue = val; break; 
     case 3: alpha = val; break; 
    } m.style.backgroundColor='rgba('+red+','+green+','+blue+','+alpha+')'; 
}

這是可以改變您的需求。只是在有選擇器和顏色數組的地方製作一個函數，它會起作用。

來源

2015-04-28 08:25:49

你的問題可能會被封閉，過於寬泛的，但有一個事物的地段，你應該在你的代碼檢查：

[(132,0,0), (132,0,132), (189,189,0)];

不知道你想達到與圓括弧什麼，你可能希望用方括號替換它們。

bufferCanvasCtx.fillStyle = colorChange;

colorChange代替colourChange？而fillStyle應該是一個字符串，而不是一個數組。而且你沒有選擇你選擇的特定值。而且它只定義了你在畫布上繪製的下一個東西的背景顏色。

來源

2015-04-28 08:24:28

如何創建滑塊來更改顏色？

回答

相關問題