HTML5、canvas颜色拾取器

最新推荐文章于 2024-09-06 17:44:30 发布

weixin_33691817

最新推荐文章于 2024-09-06 17:44:30 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CaktyRiven/p/5287774.html

本文介绍了一个基于HTML5 Canvas的简单颜色拾取器。通过绘制一个由不同RGB值组成的颜色块网格，并使用getImageData方法来捕捉鼠标点击位置的颜色。此拾取器适用于初学者学习Canvas的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>canvas 颜色拾取器</title>
    <style>
        #canvas {
            border: 1px solid red;
        }
        #block {
            display: inline-block;
            width:50px;
            height: 50px;
            vertical-align: top;
            background-color: black;
        }
    </style>
</head>
<body>    
    <canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>
    <span id="block"></span>
    <script>
        //获取id 
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //绘制填充颜色块 
        for(var i = 0; i < 16; i++) {
            for(var j = 0; j < 16; j++) {
                // gba(255,255,0) --->gba(255,0,0)
                ctx.fillStyle = "rgb("+(255 - j*16)+","+(255 - i*16)+",0)";
                ctx.fillRect(i*25,j*25,25,25);
            }
        }
        // 显示获取的颜色
        var block = document.getElementById("block");
        // 点击利用imgDate获取rgb值
        canvas.onclick = function(e) {
            var e = e || window.event;
            //e.layerX，e.layerY相对于绑定事件对象canvas的坐标
            var x = e.layerX;
            var y = e.layerY;
            // console.log(e);
            var imgData = ctx.getImageData(x,y,1,1);
            var r = imgData.data[0];
            var g = imgData.data[1];
            var b = imgData.data[2];
            
            block.style.backgroundColor = "rgb("+r+","+g+","+b+")";
        }
    </script>
</body>

</html>