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.您可能还需要使用影子帆布如果你想领域尽管如此，画画也有内容。