Canvas 更改画布上ImageElement的色调/色调

我正在为我的游戏引擎制作一些粒子动画，我想知道是否有可能更改画布ImageElement对象的、gamma和其他图像属性，从而保持图像的形状

到目前为止，我尝试的是：

_ctx.save();
_ctx.setStrokeColorHsl(240, 100, 50);
_ctx.fillRect(c.x, c.y, width, height);
_ctx.globalAlpha = nAlpha; //Modify the transparency
_ctx.drawImageScaled(p, c.x, c.y, width, height);
_ctx.restore();   

这是可行的，但它将色调应用于整个图像，这意味着如果图像是具有透明边缘的PNG，它甚至会绘制透明部分，因为它使用“fillRect（）”（仅绘制矩形）应用变换和图像对象

结果是：（红色粒子是半透明的圆）

---

是否有其他方法仅对图像形状着色或直接修改对象，使变换仅应用于图像的可见部分？

我不知道有内置方法可以做到这一点。一种方法是将图像绘制到临时画布上，然后自己修改图像的像素。但您需要函数在RGB和HSL之间进行转换。您可以使用此方法对饱和度和亮度执行相同的操作

双色调=0.8；
var data=_context.getImageData（0,0，_canvas.width，_canvas.height）；
var像素=data.data；
列出hsl；
列出新像素；
对于（变量i=0，len=pixels.length；i

---

使用you方法的另一种方法是，另外使用基础图像作为具有更改色调的画布的遮罩。您必须在像素之间循环，并将

像素[i+3]

更改为基础图像的alpha。但是您不必在HSL和RGB之间转换。

您应该使用GlobalComposite操作模式。 也许先画你的图像，然后画一个带globalAlpha和 globalCompositeOperation='source-top'

因此，您可以在这些模式下玩，使用打火机来照亮和着色 将图像或目的地覆盖以添加背景。
但要注意，有些模式并不适用于所有浏览器，我测试了一些较暗的模式

---

一个月前，这已经不起作用了。

2件事，一件你仍然依赖的事：var data=\u context.getImageData（0，0，\u canvas.width，\u canvas.height）；这基本上是一个矩形，所以同样的事情，第二，我担心这种逐像素的图像处理效率非常低，会导致每秒帧数下降，我会尝试使用css方法，因为处理图像数据看起来不是一个好的选择。太棒了！它起作用了，但有一件事我不需要使用fillRect方法，只需要使用全局复合（）和fillStyle，就做到了：_ctx.globalCompositeOperation='lighter'_ctx.fillStyle=“#f30”；