html5 学习简单的拾色器

时间：2010-09-02 来源：dushaobin

用canvas的getImageData 来进行获取颜色的rgba值时间短有点粗糙

下面是源码需要浏览器支持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 学习 简单的拾色器

html5 学习简单的拾色器