获取输入范围位置的背景颜色答案

【问题标题】：Get background color of input range position获取输入范围位置的背景颜色
【发布时间】：2014-03-31 01:55:45
【问题描述】：

我有一个类型为 range 的输入，其背景颜色是渐变色。我希望将渐变的背景颜色输出到当前范围值所在的类。

例如，如果输入的范围在 1-100 之间，并且输入的值为 1，使其位于输入的左侧，则左侧的颜色将被输出。

对此问题的任何帮助将不胜感激。

【问题讨论】：

jsfiddle.net/49Lxy
你的用例是什么？您是否正在尝试制作颜色选择器？
类似的东西。
我没有时间给出完整的答案，但您可能需要考虑在画布上渲染渐变，然后使用canvas.getContext("2d").getImageData 获取颜色
我试过了，不幸的是它超出了我的想象。

标签： javascript jquery html canvas

【解决方案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>

【讨论】：

这太棒了，但是你会如何使用输入范围来做到这一点！
嘿，我收藏了这个问题，因为我觉得它真的很有趣，但是你会如何为输入做这个？
我将演示和示例代码更改为使用范围控件而不是鼠标移动。干杯！