Javascript 从2D画布的选定部分获取rgb颜色代码_Javascript_Html5 Canvas

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

javascript html5-canvas

Javascript 从2D画布的选定部分获取rgb颜色代码,javascript,html5-canvas,Javascript,Html5 Canvas,我在一张橙色的画布上画了一个红色的小长方形。我引入了一个单击事件，当我只单击红色部分时，就会发生该事件。它工作正常，给了我（255 0）。但在右下角，它给了我（255 165 0），它是橙色的，显然不是我想要的。为什么会这样？如果有更聪明的方法，请提供建议。谢谢 <html> <head> <style> </style> </head> <body> <script>

我在一张橙色的画布上画了一个红色的小长方形。我引入了一个单击事件，当我只单击红色部分时，就会发生该事件。它工作正常，给了我

（255 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>


函数makeit（）{
var canvas=document.getElementById（“mycanvas”）；
画布宽度=200；
高度=50；
canvas.style.position=“绝对”；
canvas.style.top=“30px”；
canvas.style.left=“100px”；
canvas.style.border=“1px纯黑”；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“橙色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fill（）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,20,20）；
ctx.fill（）；
canvas.addEventListener（'click'，myfunc，false）；
函数myfunc（e）{
如果（e.layerXCSS边框以1px的速度移动整个内容。如果需要边框，请在画布上绘制：）
var canvas=document.getElementById（“mycanvas”）；
画布宽度=200；
高度=50；
canvas.style.position=“绝对”；
canvas.style.top=“30px”；
canvas.style.left=“100px”；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“橙色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fill（）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,20,20）；
ctx.fill（）；
canvas.addEventListener（'click'，myfunc，false）；
函数myfunc（e）{
如果（e.layerX您应该更改为：
if (e.layerX < 20 && e.layerY < 20)

或
您的示例位于红色矩形（0,0,20,20）之外。换句话说，位置（x,20）和（20,y）处的像素是橙色的。对于e.layerX==20 | | e.layerY==20是，因为画布的索引是从0,0-而不是1,1。红方块的有效期为0,0到19,19
if (e.layerX < 20 && e.layerY < 20)

(20, any_value, 1, 1)

(any_value, 20, 1, 1)