Javascript 在画布上为图像着色？

我想知道是否有一种方法可以画一个图像，但给它一个彩色效果

如果你考虑游戏，当你想放置一个精灵但有一个物体在路上时，你试着放置的物体通常会有红色的颜色来指示它不能被放置，这正是我想要达到的。 我现在在这里用不透明度绘制它：

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

，将覆盖剪裁到图像上：

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';

---

如果您试图绘制的区域也有内容，您可能还必须使用阴影画布。

我是否需要将其fillRect的宽度/高度设置为图像宽度高度，否则它将覆盖整个画布？@Dave:您需要适当设置其宽度、高度和位置，是的。嗯，由于它是等距角度，所以不确定它是否能完全工作，它不可避免地会使alpha像素也变红=/@Dave：你可以选择合适的路径并填充它。我不明白你所说的路径是什么意思？你可以使用jquery插件来实现这一点。它们在这些插件中所做的只是在canvas中操纵图像数据。jQuery不是答案，因为它对canvas元素没有多大作用。我已经在2012年4月得到了答案。。。