獲取輸入範圍位置的背景顏色

我有一個具有漸變背景色的類型範圍的輸入。我希望將漸變的背景顏色輸出到當前範圍值所在的類。獲取輸入範圍位置的背景顏色

例如，如果輸入的範圍在1-100之間，並且輸入值爲1，使其位於輸入的左側，則將輸出左側的顏色。

enter image description here

對這個問題的任何幫助，將不勝感激。

來源

2014-03-31 user3104155

http://jsfiddle.net/49Lxy/ – user3104155

什麼是你的使用情況呢？你想製作顏色選擇器嗎？ – apaul

沿着這些線的東西。 – user3104155

您可以在畫布上繪製漸變，並使用getImageData獲取選定的像素顏色。

演示：http://jsfiddle.net/m1erickson/YaQ6J/

示例代碼：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
    #myRange{width:300px;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    ctx.font="14px verdana"; 

    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var x1=0; 
    var y1=10; 
    var x2=canvas.width; 
    var y2=10; 

    // create a gradient 
    var gradient=ctx.createLinearGradient(x1,y1,x2,y2); 
    gradient.addColorStop(0.00,"indigo"); 
    gradient.addColorStop(1.00,"steelblue"); 

    // draw the gradient across the canvas 
    ctx.fillStyle=gradient; 
    ctx.fillRect(x1,y1-10,x2-x1,20); 

    // get the pixel color array for the gradient 
    var data=ctx.getImageData(x1,y1,canvas.width,1).data; 

    // get the gradient using a range control 
    $("#myRange").on("input change",function(){ 
     var value=$(this).val(); 
     var i=value*4; 
     var r=data[i]; 
     var g=data[i+1]; 
     var b=data[i+2]; 
     var a=data[i+3]; 

     // change the result rectangle to the mouseX color 
     var fill="rgba("+r+","+g+","+b+","+a+")"; 
     ctx.fillStyle=fill; 
     ctx.clearRect(0,20,canvas.width,30); 
     ctx.fillRect(0,25,50,20); 
     ctx.fillText(fill,75,40); 
    }); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <input id="myRange" type="range" min="0" max="299"><br> 
    <canvas id="canvas" width=300 height=45></canvas> 
</body> 
</html>

來源

2014-03-31 03:53:49 markE

這真棒，你會怎麼做與輸入範圍雖然！ – ramr

嘿，我贊成這個問題，因爲我認爲這真的很有趣，你怎麼會這樣做的輸入雖然？ – user1775570

我將演示和示例代碼更改爲使用範圍控件而不是mousemove。乾杯! – markE

獲取輸入範圍位置的背景顏色

回答

相關問題