我想知道是否有方法繪製圖像,但給它一個着色效果。Colourize在畫布上的圖像?
如果你考慮遊戲,當你想放置一個精靈,但是一個對象的方式,往往你試圖放置的對象得到一個紅色的色調,以表明它不能放置這就是我試圖實現。
我目前在這裏的不透明度繪製:
ctx.globalAlpha = 0.5
ctx.drawImage(image,abposx,abposy);
這是可能實現無庫?
我想知道是否有方法繪製圖像,但給它一個着色效果。Colourize在畫布上的圖像?
如果你考慮遊戲,當你想放置一個精靈,但是一個對象的方式,往往你試圖放置的對象得到一個紅色的色調,以表明它不能放置這就是我試圖實現。
我目前在這裏的不透明度繪製:
ctx.globalAlpha = 0.5
ctx.drawImage(image,abposx,abposy);
這是可能實現無庫?
您可以在上面畫一個半透明的矩形。例如:
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
等距圖像,所有你需要做的就是建立適當的路徑。這裏有一個例子:
您可以通過設置夾覆蓋到你的圖像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.您可能還需要使用影子帆布如果你想領域儘管如此,畫畫也有內容。
你可以使用jquery插件來實現這一點。他們在這些插件中所做的只是在畫布中操縱圖像數據。 – 2013-11-13 12:03:01
jQuery不是答案,因爲它對canvas元素沒有太大的作用。我已經在2012年4月得到了答案... – Sir 2013-11-13 16:40:56