canvas - 更改 Canvas 上ImageElement的色调/色相

Question

我正在为游戏引擎制作一些粒子动画，我想知道是否可以更改 Canvas 的ImageElement对象的hue，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()”(仅绘制矩形)来应用变换和图像对象。

结果是这样的:(红色粒子是半透明的圆圈)

还有其他方法可以仅对图像形状进行着色或直接修改对象，以便仅将变换应用于图像的可见部分吗？

Answer 1

您应该使用globalCompositeOperation模式。
可能先绘制图像，然后再绘制带有globalAlpha的fillRect和
globalCompositeOperation ='源头'。

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

因此您可以在这些模式下玩耍，使用打火机进行打火和着色
图片或目标上方添加背景。
但是请注意，某些模式不适用于所有浏览器，我测试了一些较暗的模式
一个月前，当时还行不通。