在画布上着色图像？

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.如果您尝试绘制的区域也有内容，您可能还必须使用阴影画布。