HTML5 Canvas API在内存上节省每像素1bit CanvasRenderingContext？

Question

有没有办法在每个像素CanvasRenderingContext节省内存的情况下使用HTML5 Canvas API？

我想为应该接收交互的图形对象创建反向查找缓冲区。每个交互式对象应该有一个缓冲区（w * h * 1位）。对象可触摸的那些像素将具有值1（就像为每个对象创建一个掩码一样）。

然后，通过询问每个反向查找缓冲区是否在鼠标位置x / y处着色为“黑色”，可以简单地回答可视化中哪些对象处于活动状态的问题。

我想使用这种方法来简化向基于画布的可视化添加交互的过程。

在实践中，你只需要实现一个draw（ctx）方法（像往常一样），并且只有当你想要进行交互时，还需要一个额外的掩码（reverselookupbuffer）方法来标记对象应该可以触摸的区域（例如，一些文字的矩形）

为了有效地实现这一点，我需要一个简单的像素缓冲区，每个像素只能存储1位。我这里不需要颜色。

使用额外的ordinaray画布元素，我需要大量的内存来存储遮罩，例如100个可触摸的物体）

在800x600画布上的

将导致800 * 600 * 32 * 100位= 183 MB，但如果我使用1位位图则仅为5.6MB。

你有什么想法？

非常感谢，

迈克尔

Answer 1

我认为Cake.js实现了你正在寻找的东西http://code.google.com/p/cakejs/。它不再被维护，所以你可以把它拿起来。

Answer 2

也许我的回复有点迟了和简单 - 使用WebGL人们正在做的是鼠标按下的选择模式渲染传递 -

1. 鼠标按下（x，y）
2. 设置1x1像素视口{x，y，x + 1，y + 1）
3. 渲染显示列表，每个元素都有一个单独的任意颜色，映射到元素
4. 然后（在Z缓冲之后）1x1像素帧缓冲区包含最近元素颜色的单个像素 - 读取像素并找到映射元素

这就是理论！