javascript - 在画布中为图像着色？

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

这是一个演示。

对于等距图像，您所要做的就是创建适当的路径。这是一个例子：

您可以将叠加层设置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';

这是一个演示。但是，如果您尝试绘制的区域也有内容，您可能还必须使用阴影画布。