Question

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

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

enter image description here

非常感谢对此问题的任何帮助。

Answer 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>

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

1 个答案: