简体繁体 English

如何仅对图像的一部分使用透明效果

[英]how to use transparent effect for only a part of the image

原文 2014-12-14 06:43:49 8 1 javascript/ jquery/ mouseevent/ imagemap/ jquery-hover

I am not sure if it is possible. 我不确定是否可以。 But let's say there are two images, one over another. 但是，假设有两张图片，一张一张。 Then I will have a circle size 100px around my cursor. 然后，我的光标周围将有一个100px的圆圈。 So when I move the cursor over the image, it shows part of image that is under the front image. 因此，当我将光标移到图像上方时，它显示的是位于正面图像下方的部分图像。 So the back image is hidden and visible only if the circle size 100px is over some part of it. 因此，仅当圆圈大小100px在其一部分上时，背面图像才隐藏并可见。

Unfortunately I have no code as I am not sure if it is possible to create. 不幸的是我没有代码，因为我不确定是否可以创建。

However, any idea about it? 但是，对此有什么想法吗？

1 个解决方案

I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. 我会尝试将隐藏的图像实际堆叠在可见的图像上方，然后使用HTML5的画布跟踪鼠标光标，在光标下方剪切一个圆形区域，然后在其上方绘制图像。 This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. 这给人一种幻象，即您实际上是在“揭示”基础图像，而实际上您实际上是在揭示堆叠在顶部的图像的一小部分。 Repeat this any time the user moves his/her cursor. 每当用户移动其光标时，重复此操作。

Here are some resources you might find useful in coding this: 这里有一些资源可能对您进行编码有用：

HTML5 Canvas Clipping Region Tutorial HTML5画布裁剪区域教程

HTML5 Canvas Mouse Coordinates HTML5画布鼠标坐标

Stack Overflow: clearing circular regions from HTML5 Canvas 堆栈溢出：从HTML5画布清除圆形区域