在画布图像上绘制蒙版

Question

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

1. 将任何图像上传到画布[完成]
2. 在其上放置任何类型的蒙版（此屏幕在屏幕上此圆圈）[完成]
3. 移动，旋转和缩放图像[完成]
4. 能够像在此屏幕上一样看到蒙版周围的其余图像（应该变暗​​）

我尝试了多种渲染方式 ctx.globalCompositeOperation 但我只在遮罩内得到图像，其余图像被画布背景覆盖（尽管我可以移动或旋转图像）

编辑： 当我旋转它时，它应该看起来像第二张照片 然后我要剪辑此矩形并保存到文件（也已完成）

Answer 1

问题已经裁剪出所需的图像，因此获取所需图像的一种方法是将整个图像绘制在画布上，在其上绘制蒙版，然后将已经获得的图像放置在画布上。

但是，可以反过来做。

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

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

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

切出所需的遮罩。在不知道确切需要什么形状的情况下，无法给出确切的代码，但是请参见https://stackoverflow.com/questions/36711841/apply-bitmap-mask-to-image-on-html5-canvas，其中描述了如何去除面膜的一部分。