按像素图像定义的蒙版剪辑或阻止在该蒙版外部绘制

Question

我进入js，html和css编程两天。非常新手！

关注并构建此TUTORIAL

问题1：如何将这名男性加入背景中（参见图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函数，不确定我是否可以使用像素形式作为剪切路径。制作大量的图像替代品＆＃34;不是最好的方式。 任何建议

编辑：

我的工作是：VeryHelpful

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

凌乱的笔触！

他应该是这样的。然后我想救他。

Answer 1

尽管存在ctx.clip()这样的事情，但有时并不是这样，因为使用路径是不切实际的。

我喜欢的解决方案涉及创建一个虚拟空白画布，您可以在其上绘制像素图像。通过各种操作，例如使用ctx.getImageData和类似操作来确保您只获得一种颜色或仅应用其他滤镜一次，您可以获得一个看似空的图像（大多数为0）你想要剪辑其他图像或路径的地方。

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

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