Javascript 在Webgl位置获取颜色

我想在Chrome控制台中调试我的html5画布。我想得到位置（445650）的像素颜色

我尝试使用以下代码：

var example = document.getElementById('glcanvas');
var context = example.getContext('webgl');
var pixels = new Uint8Array(context.drawingBufferWidth * context.drawingBufferHeight * 4); 
var data = context.readPixels(445, 650, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels);

当我逐一运行这些行时，我得到：

example
<canvas class="topleft" id="glcanvas" width="479" height="716" tabindex="1" contenteditable="true" style="cursor: default; width: 479px; height: 616px;"></canvas>

context
WebGLRenderingContext {vertexAttribDivisor: function, drawArraysInstanced: function, drawElementsInstanced: function, createVertexArray: function, deleteVertexArray: function…}

data
undefined

所有像素返回0，包括：

pixels
Uint8Array(2268552) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…]

---

它说，画布的高度只有616，因此像素位于画布之外。

readPixels函数确实没有返回任何有用的内容。您感兴趣的像素数据将复制到

像素

阵列：

var pixels = new Uint8Array(
    4 * context.drawingBufferWidth * context.drawingBufferHeight
);
context.readPixels(
    0,
    0,
    context.drawingBufferWidth,
    context.drawingBufferHeight,
    context.RGBA,
    context.UNSIGNED_BYTE,
    pixels
);
// And here's components of a pixel on (x, y):
var pixelR = pixels[4 * (y * context.drawingBufferWidth + x)];
var pixelG = pixels[4 * (y * context.drawingBufferWidth + x) + 1];
var pixelB = pixels[4 * (y * context.drawingBufferWidth + x) + 2];
var pixelA = pixels[4 * (y * context.drawingBufferWidth + x) + 3];

---

这里

x

和

y

是要检查的像素的坐标。

这不是问题所在。读取帧缓冲区外的像素是WebGL中定义的行为，所有像素将仅设置为（0，0，0，0）。所有这4个新像素返回0：（@TSR如果您没有画任何东西，那么这些值是正确的，画布中所有像素的所有组件都初始化为0。@KirillDmitrenko有点晚了，但是这个解决方案不是很慢吗？我需要检查每个鼠标事件最多两个像素，所以我认为这将是非常不理想的（或者可能不会那么糟糕？）还有什么替代方案不强制同步？@synchronizer是的，由于readPixel的同步性质以及浏览器实际获取该像素所需的工作量，它可能会成为瓶颈。我在应用程序中所做的是读取帧缓冲区区域，而不是单个像素和缓存读取数据。由于鼠标移动非常接近，有很好的机会进行下一次“查找”将进入该缓存区域。@KirillDmitrenko Hmmm…我明白了。在我的例子中，我刚刚意识到我只会在图像不变的情况下检查像素。这是否意味着我可以在不绘制任何新内容的情况下从帧缓冲区缓存某些内容并检查这些像素？始终保持640 x 480缓存是否“正常”（内存不太多）。

var pixels = new Uint8Array(
    4 * context.drawingBufferWidth * context.drawingBufferHeight
);
context.readPixels(
    0,
    0,
    context.drawingBufferWidth,
    context.drawingBufferHeight,
    context.RGBA,
    context.UNSIGNED_BYTE,
    pixels
);
// And here's components of a pixel on (x, y):
var pixelR = pixels[4 * (y * context.drawingBufferWidth + x)];
var pixelG = pixels[4 * (y * context.drawingBufferWidth + x) + 1];
var pixelB = pixels[4 * (y * context.drawingBufferWidth + x) + 2];
var pixelA = pixels[4 * (y * context.drawingBufferWidth + x) + 3];