html5 学习简单的拾色器
程序员文章站
2023-11-29 15:37:52
用canvas的getImageData 来进行获取颜色的rgba值 时间短有点粗糙
... 10-09-03...
下面是源码 需要浏览器支持html5
<html>
<head>
</head>
<body>
<canvas id="colorpicker" onmousemove="showcurrentcolor(event)">
</canvas>
<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",300);
var cxt = can.getcontext("2d");
var gradient = cxt.createlineargradient(0.5,0.5,0,150);
gradient.addcolorstop(0,'#00ff00');
gradient.addcolorstop(1,'#ff0000');
cxt.fillstyle=gradient;
cxt.fillrect(0,0,60,200);
var ox= can.offsetleft
var oy = can.offsettop;
var span = document.createelement("input");
span.setattribute("id","rgba");
document.getelementbyid("textresult").appendchild(span);
}
}
function showcurrentcolor(e){
var x = e.clientx - 8;
var y = e.clienty - 29;
var w = 10;
if(document.createelement("canvas")){
if(document.getelementbyid("colorpicker").getcontext){
var can = document.getelementbyid("colorpicker");
var cxt = can.getcontext("2d");
var gradient = cxt.createlineargradient(0.5,0.5,0,150);
var span = document.getelementbyid("rgba");
var imgdatas = cxt.getimagedata(ox,oy,10,200);
var imgdata = imgdatas.data;
var g = imgdata[4 *(w)*(y)+(x)*4 + 1];
var r = imgdata[4 *(w)*(y)+(x)*4];
var b = imgdata[4 *(w)*(y)+(x)*4 + 2];
var a = imgdata[4 *(w)*(y)+(x)*4 + 3];
span.value="r="+r+" g="+ g+" b="+b +" a="+a;
document.getelementbyid("textresult").appendchild(span);
}
}
}
</script>
</body>
</html>
复制代码
代码如下:<html>
<head>
</head>
<body>
<canvas id="colorpicker" onmousemove="showcurrentcolor(event)">
</canvas>
<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",300);
var cxt = can.getcontext("2d");
var gradient = cxt.createlineargradient(0.5,0.5,0,150);
gradient.addcolorstop(0,'#00ff00');
gradient.addcolorstop(1,'#ff0000');
cxt.fillstyle=gradient;
cxt.fillrect(0,0,60,200);
var ox= can.offsetleft
var oy = can.offsettop;
var span = document.createelement("input");
span.setattribute("id","rgba");
document.getelementbyid("textresult").appendchild(span);
}
}
function showcurrentcolor(e){
var x = e.clientx - 8;
var y = e.clienty - 29;
var w = 10;
if(document.createelement("canvas")){
if(document.getelementbyid("colorpicker").getcontext){
var can = document.getelementbyid("colorpicker");
var cxt = can.getcontext("2d");
var gradient = cxt.createlineargradient(0.5,0.5,0,150);
var span = document.getelementbyid("rgba");
var imgdatas = cxt.getimagedata(ox,oy,10,200);
var imgdata = imgdatas.data;
var g = imgdata[4 *(w)*(y)+(x)*4 + 1];
var r = imgdata[4 *(w)*(y)+(x)*4];
var b = imgdata[4 *(w)*(y)+(x)*4 + 2];
var a = imgdata[4 *(w)*(y)+(x)*4 + 3];
span.value="r="+r+" g="+ g+" b="+b +" a="+a;
document.getelementbyid("textresult").appendchild(span);
}
}
}
</script>
</body>
</html>
上一篇： js移除div里面内容（引入外部css文件的方式）
下一篇： IE支持HTML5的解决方法