使用一種模式在HTML5/JS中繪製圖像

Question

我有一個項目，我目前正在努力，我似乎​​無法爲Google提供解決方案。我有一個HTML畫布，我使用ctx.drawImage（）來堆疊一對夫婦的圖像，我遇到的問題是我無法弄清楚如何使用this這樣的模式來繪製圖像this。無論如何，這可以做到容易，或者我需要嘗試生成服務器端的圖像，然後將其推送給客戶端繪製？

我試圖繪製圖像的順序如下：

• 背景顏色
• 甲四捨五入掩模
• 第一鏈接的圖像（這是我想用圖案畫出一個）

我試圖保持前兩個圖層可見，只是覆蓋模式文件的第三個不透明部分。所有圖層都需要將透明部分設置爲透明。

Answer 1

更新滿足附加條件加入到問題，因爲這個答案是先貼：

如果圓形遮罩填補或透明的中心，但以下假定填充中心你沒有說明：

• 繪製字母圖像
• Change comp。模式改爲「source-atop」（請參閱​​下面的舊回答關於如何操作）
• 繪製模式。你現在擁有這封信的形狀。
• Change comp。模式改爲「destination-over」
• 繪製蒙版，這將結束「現有內容的後面」
• 使用相同的補充填充背景顏色的畫布。模式。

舊答案

當然，繪製第一圖像，只要它具有alpha通道，到畫布上。

然後改變複合模式source-atop（source-in也可以使用，但它會刪除其不會將新像素下結束了現有的內容）：

ctx.globalCompositeOperation = "source-atop"; 

然後在頂部繪製所述第二圖像。改回正常模式：

ctx.globalCompositeOperation = "source-over";