Colourize在畫布上的圖像？

Question

我想知道是否有方法繪製圖像，但給它一個着色效果。

如果你考慮遊戲，當你想放置一個精靈，但是一個對象的方式，往往你試圖放置的對象得到一個紅色的色調，以表明它不能放置這就是我試圖實現。

我目前在這裏的不透明度繪製：

ctx.globalAlpha = 0.5     
ctx.drawImage(image,abposx,abposy); 

這是可能實現無庫？

Answer 1

您可以在上面畫一個半透明的矩形。例如：

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 1/2 opacity red 
ctx.fillRect(0, 0, 30, 30); // Draw this over top of your image 

Here's a demo.

等距圖像，所有你需要做的就是建立適當的路徑。這裏有一個例子：

您可以通過設置夾覆蓋到你的圖像globalCompositeOperation到source-atop：

ctx.globalCompositeOperation = 'source-atop'; 
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 1/2 opacity red 
ctx.fillRect(0, 0, 30, 30); // Draw this over top of your image 
ctx.globalCompositeOperation = 'source-over'; 

Here's a demo.您可能還需要使用影子帆布如果你想領域儘管如此，畫畫也有內容。