html - 图像上的 Html 画布聚光灯区域

Question

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

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

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

Answer 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();

展示这两种技术的在线演示

备择方案

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

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