时间戳

首页 > 解决方案 > 在画布图像上绘制蒙版

javascript - 在画布图像上绘制蒙版

问题描述

这可以在画布上在屏幕上做这样的事情吗？基本上我想：

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

我尝试了各种方法来渲染它， ctx.globalCompositeOperation 但我只在蒙版内获得图像，图像的其余部分被画布背景覆盖（尽管我可以移动或旋转图像）

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

标签： javascripthtmlcanvas

解决方案

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

但是，也可以反过来做。

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

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

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描述如何去除部分面具。

推荐阅读