获取输入范围位置的背景颜色
use*_*155 4 javascript jquery html5 canvas
我有一个类型范围的输入,其背景颜色是渐变.我希望将渐变的背景颜色输出到当前范围的值所在的类.
例如,如果输入的范围在1-100之间并且输入的值为1,使其位于输入的左侧,则将输出左侧的颜色.
对此问题的任何帮助将不胜感激.
您可以在画布上绘制渐变并使用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>