您的位置：首页 > Web前端 > HTML5

html5 学习简单的拾色器

2010-09-03 21:48 441 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航