我进入js，html和css编程两天。非常新手！通过由像素图像定义的蒙版剪辑或防止在该蒙版外绘图

继和建筑在这个TUTORIAL

Q1：我怎么可以添加此公到背景（见figuere 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);

凌乱的招！

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

来源

2017-02-13 Andre Elrico

帆布有剪辑...创建一个从你的男人的路径，然后调用'context.clip（）'导致图纸显示只在剪辑区域内。您还可以使用[合成]（http://stackoverflow.com/documentation/html5-canvas/5547/compositing#t=201702131956041367534），使您的所有新图形仅显示在您的男性内部。 – markE

我的确如此。这对我来说是最快最简单的解决方案。我把gimp的选择转化为svg路径。 –

虽然有这样的事，作为ctx.clip()，这有时是不是出了什么希望，因为它是不切实际的使用路径。

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

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

在这一点上，你可以得出这样的虚拟画布图像到主画布

来源

2017-02-13 20:53:41 towc

通过由像素图像定义的蒙版剪辑或防止在该蒙版外绘图

编辑：

回答

相关问题