Javascript HTML/CSS在CSS掩码中绘制方形窗口

所以我有一个图像网格（地图瓷砖），我用一个绝对定位的div在上面画了一个半透明的遮罩，宽度和高度设置为100%

我现在希望用户能够绘制出一个矩形的面具，与鼠标使用鼠标向下，拖动，鼠标向上。该矩形将随着鼠标的移动而动态绘制，并且该矩形将像一个穿过遮罩的窗口，显示下方的地图平铺，没有半透明度

我目前正在考虑使用5个div-一个用于窗口，4个用于掩码，当我拖动鼠标时，可以使用javascript调整大小。有人知道更简单的方法吗？我使用的是jquery，我需要支持IE7以上的版本，所以html5技术已经过时了

干杯

---

Colm

您应该试试SVG画布。有一个SVG js库，适合初学者： ，看看

请注意，这与HTML5无关（请不要与HTML5画布混淆，这是SVG）

我认为这正是您需要的（演示）

---

也许有可能从中分割出那一部分。

你的想法是我该怎么做。。。很好的建议，哈哈+1，但请注意SVG和Canvas不是一回事。这是HTML5技术，很难在IE中快速实现。引用：“我使用的是jquery，我需要支持IE7，所以只有HTML5技术是不存在的。”我很想使用SVG，但不幸的是，正如Equivacy所提到的，必须支持IE会把这个想法打倒……说真的，在你打倒这个建议之前试试看，它确实支持IE（甚至IE6），因为我正在使用它。。。。它与HTML5IE6无关，IE6不支持SVG。您可能正在使用一个库，该库在IE浏览器中使用VML，在其他支持它的浏览器中使用SVG。