html5 学习 简单的拾色器

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

下面是源码 需要浏览器支持html5

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<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>

 

 

posted @   dushaobin  Views(956)  Comments(1)  Edit  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae