使用 HTML5 canvas制作拾色器
自制的拾色器漂亮吧，哈哈 废话不多说直接上代码，希望可以帮到需要的朋友
<html>
<head>
<style>
.canvas_color{position:relative;width: 400px;height: 10px;}
.canvas_color canvas{ position: absolute; border:0;background-color:‘‘;left:0px; top:0px;width: 400px;height: 10px;}
.canvas_box{ width:5px; height:17px; background: #000; position: absolute; left:0px; top:-3px;}
</style>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<!--canvas画颜色条-->
<div class="canvas_color"><canvas id="colorPicker">
</canvas>
<!--拖拽框-->
<div class="canvas_box"></div>
</div>
<br/>
<div id="textResult">
</div>
<script type="text/javascript">
if(document.createElement("canvas")){
if(document.getElementById("colorPicker").getContext){
var can = document.getElementById("colorPicker");
can.setAttribute("height",5);
can.setAttribute("width",400);
var ctx=can.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,400,10);//创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
gradient.addColorStop(0,‘rgb(255,4,0)‘);//向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
gradient.addColorStop(0.2,‘rgb(237,181,0)‘);
gradient.addColorStop(0.4,‘rgb(2,180,56)‘);
gradient.addColorStop(0.6,‘rgb(0,232,255)‘);
gradient.addColorStop(0.8,‘rgb(14,0,145)‘);
gradient.addColorStop(1,‘rgb(255,33,205)‘);
ctx.fillStyle=gradient;//设置用于填充一个区域的颜色 — 例如，fillStyle=‘rgb(255,0,0)‘.
ctx.fillRect(0,0,400,10);//填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。 .
}
}
$(function(){
$(‘.canvas_box‘).draggable({
start: function () { // 拖拽开始
},
stop:function(e){
var x = e.clientX;
var y = e.clientY;
if(x<0){
x=0;
}
if(x>400){
x=399;
}
var imgData=ctx.getImageData(x,3,2,1);
$html = ‘<span>R:<font
color="aqua">‘+imgData[‘data‘][0]+‘</font> G:<font
color="aqua">‘+imgData[‘data‘][1]+‘</font> B:<font
color="aqua">‘+imgData[‘data‘][2]+‘</font></span>‘
$(‘#textResult‘).html($html);
},
containment: [8, 5, 405, 5]//控制拖动区域范围
})
})
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
