我進入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

通過由像素圖像定義的蒙版剪輯或防止在該蒙版外繪圖

編輯：

回答

相關問題