注册账号 | 登录

用QQ帐号登录

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › html5 学习简单的拾色器

发新帖

html5 学习简单的拾色器

authicon

dly 发表于 2011-1-16 10:58:18 | 显示全部楼层 |阅读模式

下面是源码需要浏览器支持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>

复制代码

上一篇：html5时钟实现代码
下一篇：CSS文本属性的使用方法

回复

发新帖

Discuz商业插件

Discuz模板风格

Discuz商业扩展

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-10-31 23:39

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表