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;
        }

在这个阶段这可能是完全错误的，所以对解决方案形式的任何帮助或者对可能有用的资源的链接都会非常感激！

Answer 1

您的问题可能会过于宽泛，但您应该在代码中查看很多内容：

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

不确定您想要使用圆括号实现什么，您可能希望使用方括号替换它们。

bufferCanvasCtx.fillStyle = colorChange;

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

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

这可以根据您的需要进行更改。只需创建一个具有选择器和颜色数组的函数，它就可以工作。

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

2 个答案: