Javascript 在画布图像上绘制遮罩

在画布中可以在屏幕上执行类似的操作吗？ 基本上我想：

将任何图像上载到画布[完成]

在上面放上任何类型的面具（在屏幕上这个圆圈）[完成]

移动、旋转和缩放图像[完成]

能够像在这个屏幕上一样看到遮罩周围的其他图像（应该变暗）

我尝试了各种方法来渲染它

ctx.globalCompositeOperation

但我只在遮罩内得到图像，图像的其余部分被画布的背景覆盖（尽管我可以移动或旋转图像）

编辑： 当我旋转它时，它应该像第二张图片上那样 然后我想剪辑这个矩形并保存到文件中（这也完成了）

---

问题已经切掉了所需的图像，因此获得所需图像的一种方法是在画布上绘制整个图像，在其上绘制一个遮罩，然后将已获得的图像放置在该图像上

然而，有可能反过来做

在画布上绘制图像，根据需要进行缩放、倾斜、拉伸和旋转

然后在其上绘制半透明覆盖层，例如

ctx.beginPath();
ctx.rect(0,0,width,height);
ctx.fillStyle = “rgba(0,0,0,0.4);
ctx.fill();

---

剪下所需的面具。如果不知道需要什么形状，就不可能给出确切的代码，但请参见描述如何移除部分遮罩的示例。

是否需要将背景图像放到主画布上？你能不能在它后面放几个div（或者一块适当旋转的画布），以原始图像为背景，在上面加一个半透明的遮罩？@AHaworth我对我的原始帖子进行了编辑-当我旋转或移动它时，整个图像应该移动到遮罩下面-然后我想剪辑并保存到文件中，仅遮罩内图像的一部分-这类似于照片编辑器。你认为不使用画布就完全可以做到这一点吗？只使用div和操纵背景？使用画布是我最初对项目的要求，但我认为我不必使用它，它们可以改变。我并不是说你没有在主要部分使用画布，只是建议你的背景是否可以用另一种方式完成。