僅將非透明像素複製到HTML5畫布

我正在爲小孩子寫一個着色遊戲，最初在畫布上顯示黑白圖像，並且隨着用戶將繪圖工具（鼠標）移動到畫布上，黑白表面會使用相應彩色圖像的顏色信息進行重塗。僅將非透明像素複製到HTML5畫布

特別是，在每次鼠標移動時，我都需要將彩色圖像中的圓形區域複製到畫布上。圓的邊緣應該有點模糊以更好地模仿真實繪圖工具的特性。

問題是如何做到這一點？

我看到的一種方法是使用裁剪區域，但這種方法不會讓我有模糊的邊緣。還是呢？

所以我正在考慮使用alpha蒙版來做到這一點，並只複製對應於掩碼中具有非零alpha的像素的像素。這可行嗎？

來源

2012-02-10 akonsu

我的建議是在您想要顯示的彩色圖像前面繪製可繪製的畫布。（您可以使用彩色圖像作爲畫布的CSS背景圖像。）

最初使畫布包含100％不透明度的黑白圖像。然後，當您繪製時，實際上會擦除畫布的內容以顯示後面的圖像。

像這樣：

var pos_x, pos_y, circle_radius; // initialise these appropriately 

context.globalCompositeOperation = 'destination-out'; 
context.fillStyle = "rgba(0,0,0, 1.0)"; 

// And "draw" a circle (actually erase it to reveal the background image) 
context.beginPath(); 
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2); 
context.fill();

來源

2012-02-10 15:15:37 andrewmu

您是否考慮過使用從不透明顏色到完全透明顏色的徑向漸變？

這是一個來自Mozilla的演示。圓圈是按照你需要的方式繪製的。 - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

來源

2012-02-10 11:08:41

感謝。 Alpha漸變是他們在ActionScript中執行的方式，所以是的，我想到了這一點，我只是不知道如何使用漸變從圖像複製到畫布。 – akonsu 2012-02-10 11:12:30

哦，對，我讀錯了你的問題。抱歉。我不認爲你可以用圖像做到這一點。我可以考慮的唯一方法是將圓形區域渲染爲一個畫布，並在「xor」合成模式中繪製一個白色至黑色的徑向漸變。然後將其複製到主畫布。這可能不是完全可能的，但你明白了。 – 2012-02-10 11:17:50

我可能會使用具有不同alpha的多個剪切區域（每個單獨一個dab）來模仿您之後的效果。首先渲染低透明度（使用drawImage粘貼），然後渲染其餘部分，直到達到alpha = 1.0。

來源

2012-02-10 11:18:43

僅將非透明像素複製到HTML5畫布

回答

相關問題