图像上的 Html 画布聚光灯区域答案

【问题标题】：Html canvas spotlight region over image图像上的 Html 画布聚光灯区域
【发布时间】：2016-06-13 01:46:16
【问题描述】：

我正在寻找一种解决方案，以在绘制图像的 html 画布上实现聚光灯。我用以下方法使整个图像变暗：

context.globalAlpha = 0.3;
context.fillStyle = 'black';
context.fillRect(0, 0, image.width, image.height);

这很好用。现在我想消除特定矩形区域的变暗效果。在不计算“周围”矩形的情况下如何做到这一点？

【问题讨论】：

标签： html image canvas

【解决方案1】：

重绘原始图像的一个区域

你可以简单地画回你想要“显示”的指定矩形区域的图像：

 /// reset global alpha and then
 context.globalAlpha = 1;

 context.drawImage(image, rx, ry, rw, rh,
                          rx, ry, rw, rh)

在这里，您首先选择源矩形（第一行），然后是目标矩形。如果宽度和高度（rw 和 rh）不同，则源区域将缩放以适合目标区域。如果图像大小为 1:1，则源和目标将相同（如本例所示）。

剪辑

您也可以使用剪辑代替：

/// to remove clipping properly save current state
context.save();

/// define region you want to clip
context.beginPath();
context.rect(rx, ry, rw, rh);

/// set clip
context.clip();

/// draw the image as the original
context.drawImage(image, x, y);

/// remove clipping
context.restore();

ONLINE DEMO SHOWING THESE TWO TECHNIQUES

替代方案

复合模式 (globalCompositeOperation) 也允许剪切，但在这里没有用，因为您仍然需要使用原始图像的一个区域进行绘制，因此您可以直接绘制它（如第一个示例所示）。

另一种方法是使用两个画布，在底部画布上绘制图像，在顶部画布上绘制蒙版。然后在顶部画布上打一个洞。如果您想为蒙版设置动画/移动，这可能是一个不错的解决方案。

【讨论】：