如何创建滑块来更改颜色？

本质上，我试图取一个值，由接口上的滑块定义，通过数组传递该值以选择一种颜色，并将该颜色传递给包含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

如何创建滑块来更改颜色？

回答

相关问题