【问题标题】：Clip by mask defined by pixel image or prevent drawing outside of that mask按像素图像定义的蒙版剪辑或防止在该蒙版之外绘图
【发布时间】：2017-07-01 20:40:45
【问题描述】：

我在 js、html 和 css 编程方面花了两天时间。真是个新手！

关注并以此为基础TUTORIAL

Q1：如何将这个男性添加到背景中（见图 1）并禁止任何超出边界的笔触？

将图片添加到背景并不是什么大不了的事！

function make_base()

    {
      base_image = new Image();
      base_image.src = 'img/bmapFront.gif';
       base_image.onload = function(){
        context.drawImage(base_image, 0,0);
      }
    }

有一个context.clip函数，不知道能不能用像素形式作为剪切路径。制作大量的“图像减法”并不是最好的方法。任何建议

编辑：

为我完成了这项工作：VeryHelpful

var frontPath = new Path2D ("M 133.41,17.00  C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);

乱七八糟的笔画！

他应该是这个样子。那我要救他。

【问题讨论】：

Canvas 有剪裁...从你的人那里创建一条路径，然后调用context.clip() 以使绘图仅在该剪裁区域内显示。你也可以使用compositing 让你所有的新图纸只显示在你的男人身上。
我就是这么做的。这对我来说是最快和最简单的解决方案。我把 gimp 的选择变成了 svg 路径。

标签： javascript html css canvas

【解决方案1】：

虽然有 ctx.clip() 这样的东西，但有时这不是我们想要的，因为使用路径是不切实际的。

我喜欢的解决方案是创建一个虚拟的空画布，在上面绘制像素图像。通过各种操作，例如使用ctx.getImageData 和类似的方法来确保您只获得一种颜色或仅应用其他过滤器一次，您可以在您所在的地方获得看起来为空的图像（大部分为 0 的 alpha）想剪掉其他图片或路径。

此时，您将使用ctx.globalCompositeOperation = 'source-atop'，或者从mdn's list of globalCompositeOperations 中选择另一个您可能想要使用的。

此时，您可以将这个虚拟画布图像绘制到主画布上

【讨论】：