使用Javascript / Canvas / Jquery实现部分背景透明
提问于 2012-08-05 18:54:47
所以，我想做一个涉及光的游戏。它将允许你移动手电筒和灯泡之类的东西，以显示你所在的房间。
我想通过(也许)在div上有一个房间的背景图像，然后在里面有另一个带有黑色背景的div来模拟黑暗来实现这一点。然后，当玩家移动光源时，移除黑色背景的部分(或使它们透明)，这样你就可以通过它们看到背景，使它们看起来像是被照亮的。
我尝试了几种方法-到目前为止唯一有效的方法是使用大量1x1px的黑色div作为‘像素’，并通过编程使它们变得透明，但这真的(真的)很慢。
我很确定canvas有一个解决方案，这个JS Fiddle是朝着正确的方向迈出的一步，但我想显示一个背景图像，而不仅仅是“光”。
任何建议或想法都将非常受欢迎。我会把你的用户名写在字幕里;-)
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-05 19:17:33
您可以通过将Compositing与source-over以外的globalCompositeOperation一起使用来实现这一点。
当使用透明(rgba)颜色绘制时，值destination-out甚至xor似乎就是您所需要的。我已经为演示构建了this fiddle：在具有红色背景(和white, with yellow background)的画布中的黑色矩形上绘制黄色(alpha: 0.5)。
使用alpha为1的destination-out可完全使描边/填充区域透明。使用较低的alpha，您将能够变暗已经绘制的区域，可能会有一些颜色的阴影。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11819157
复制
腾讯云开发者
