个人中心
gpt4 book ai didi

javascript - 从 2D Canvas 的选定部分获取 RGB 颜色代码

转载 作者：行者123 更新时间：2023-12-02 17:23:56 26 4
gpt4 key购买 nike

我在橙色 Canvas 内制作了一个红色小矩形。我引入了一个点击事件，当我只点击红色部分时就会发生该事件。它工作正常并给我 (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)

原因如下:context2D.getImageData 对矩形进行采样。如果您对矩形进行采样:

(20, any_value, 1, 1)

或

(any_value, 20, 1, 1)

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

关于javascript - 从 2D Canvas 的选定部分获取 RGB 颜色代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23657656/

26 4 0
文章推荐： javascript - 如何通过谷歌图表动态使用数据
文章推荐： javascript - 嵌入的 Google map 显示为灰色
文章推荐： javascript - AngularJS - 如何获得唯一值？
文章推荐： javascript - 如果值为 null，则防止调用 getJson
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com