从2D画布的选定部分获取rgb色码

get rgb color code from a selected portion of 2D canvas

本文关键字：获取 rgb 色码 定部 2D      更新时间：2023-09-26

我在一个橙色的画布里面画了一个小的红色矩形。我引入了一个点击事件，当我只点击红色部分时就会发生。它工作得很好，给了我(255 0 0)。但右下角的(255 165 0)是橙色的，显然不是我想要的。为什么会发生这种情况?如果有更聪明的方法，请告知。谢谢!

<html>
<head>
    <style>
    </style>
</head>
<body>
    <script>
        function makeit() {
            var canvas = document.getElementById("mycanvas");
            canvas.width = 200;
            canvas.height = 50;
            canvas.style.position = "absolute";
            canvas.style.top = "30px";
            canvas.style.left = "100px";
            canvas.style.border = "1px solid black";
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "orange";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fill();
            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 20, 20);
            ctx.fill();
            canvas.addEventListener('click', myfunc, false);
            function myfunc(e) {
                if (e.layerX <= 20 && e.layerY <= 20) {
                    var imageData = ctx.getImageData(e.layerX, e.layerY, 1, 1);
                    alert(imageData.data[0] + " " + imageData.data[1] + " " + imageData.data[2]);
                }
            }
        }
        window.onload = makeit;
    </script>
    <canvas id="mycanvas"></canvas>
</body>
</html>

你应该改成:

if (e.layerX < 20 && e.layerY < 20)
原因如下:getImageData采样一个矩形。如果您对矩形进行采样: 
(20, any_value, 1, 1)

或

(any_value, 20, 1, 1)

你的样本在红色矩形(0,0,20,20)之外。换句话说，位置(x, 20)和(20,y)的像素是橙色的。

CSS边框将整个东西推离1px。如果你想要一个边框，在画布上画出来:)

var canvas = document.getElementById("mycanvas");
canvas.width = 200;
canvas.height = 50;
canvas.style.position = "absolute";
canvas.style.top = "30px";
canvas.style.left = "100px";
var ctx = canvas.getContext('2d');
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 20, 20);
ctx.fill();
canvas.addEventListener('click', myfunc, false);
function myfunc(e) {
    if (e.layerX <= 20 && e.layerY <= 20) {
        var imageData = ctx.getImageData(e.layerX, e.layerY, 1, 1);
        alert(imageData.data[0] + " " + imageData.data[1] + " " + imageData.data[2]);
    }
}
http://jsfiddle.net/UQM9Q/

相关文章：