html5 Canvas google+ 反馈高亮功能

Question

对于 google+ 反馈，它如何在不剪切 html 页面的情况下“剪切”其黑色叠加层（白色矩形）以为其反馈创建突出显示效果？从这篇 How does the Screenshot part of the Google+ Feedback system work? 的帖子中，我知道高亮和黑屏是

标签和 标签。

我在这个网站http://hertzen.com/experiments/jsfeedback/examples/combination/index.html找到了类似的反馈，它的高亮效果也是

标签，它使用了CSS。但是，它的白色矩形堆叠在黑色覆盖层之上，而不是“切开”它。因此，亮点并不像谷歌那样清晰。关于谷歌的反馈突出显示功能如何工作的任何见解？是通过使用canvas globalCompositeOperation吗？我尝试修改代码以使用canvas globalCompositeOperation、destination-out 操作，但它会切穿黑色覆盖和html 页面。但这可能只是我编码错误，因为我在 JavaScript 方面不是很好。任何帮助将不胜感激！

【问题讨论】：

Answer 1

最好的办法是您尝试 google+ 反馈并使用 firebug（或其他一些开发工具）对其进行分析 起初他们用画布从网站上拍了一张我想的快照。然后他们放入一个 div 以使网站变灰。 现在是棘手的部分。当您突出显示一个区域时，在使网站变灰的 div 中，google 会在突出显示的 div 周围放置数百个 div。所以高亮的 div 没有背景，其他的 div 都是灰色的。

我认为正因为如此，在 g+ 中，您无法轻松拖动高亮 div 并将其向左再放置一些像素。

目前我只能尝试复制这种方式或找到另一种方式以全视野突出显示，而不是突出显示 div 中的一个灰色百分比