javascript - 给 Canvas 中的图像着色？

Question

我想知道是否有一种方法可以在绘制图像的同时赋予它彩色效果。

如果你考虑游戏，当你想放置一个 Sprite 但有一个物体挡在路上时，你试图放置的物体通常会变成红色，表明它不能被放置，这正是我想要实现的。

我目前在这里用不透明度绘制它:

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