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

Question

本质上，我试图获取一个由界面上的滑块定义的值，通过数组传递该值以选择颜色，然后将该颜色传递给包含 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;
        }

在这个阶段这可能是完全错误的，所以任何形式的解决方案或 link 对可能有用的资源的帮助将不胜感激！

Answer 1

您的问题可能过于宽泛，但您应该检查代码中的许多内容：

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

不确定你想用圆括号实现什么，你可能想用方括号替换它们。

bufferCanvasCtx.fillStyle = colorChange;

colorChange 而不是 colourChange？ fillStyle 应该是一个字符串，而不是一个数组。而且您没有选择您选择的特定值。它只定义你在 canvas 上绘制的下一个东西的背景颜色。

Answer 2

http://jsfiddle.net/xGAJ8/ 这值得检查

<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+')';
}

这可以根据您的需要进行更改。只需在您拥有选择器和颜色数组的地方创建一个函数，它就会起作用。

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

How can I create a slider to change a color?

html

javascript

slider