Question

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

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

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

Answer 1

重绘原始图像的区域

您可以简单地使用您想要的指定矩形区域绘制图像，并显示＆＃34;：

 /// 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）也允许剪裁，但在这里没有用，因为您仍然需要使用原始图像的区域进行绘制，因此您可以直接绘制它（如第一个示例中所示）

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

Html画布聚光灯区域在图像上

1 个答案:

重绘原始图像的区域

剪辑

替代