0

对于 google+ 反馈，它如何在不剪切 html 页面的情况下“剪切”其黑色叠加层（白色矩形）来为其反馈创建突出显示效果？在这篇文章中，Google+ 反馈系统的屏幕截图部分是如何工作的？，我知道高亮和黑屏是<div>标签和<canvas>标签。

我在这个网站http://hertzen.com/experiments/jsfeedback/examples/combination/index.html找到了一个类似的反馈，它的高亮效果也是 <div> 标签并且它使用了 CSS。但是，它的白色矩形堆叠在黑色覆盖层之上，而不是“切开”它。因此，亮点并不像谷歌那样清晰。关于谷歌的反馈突出显示功能如何工作的任何见解？是通过使用canvas globalCompositeOperation吗？我尝试修改代码以使用canvas globalCompositeOperation、destination-out 操作，但它会切穿黑色覆盖和html 页面。但这可能只是我编码错误，因为我在 JavaScript 方面不是很好。任何帮助将非常感激！！

4

1 回答 1

0

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

我认为因此在 g+ 中，您无法轻松拖动突出显示的 div 并将其放置在左侧更多像素。

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

于 2013-06-01T18:32:58.727 回答