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

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

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

最佳答案

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

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

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

关于canvas - 更改 Canvas 上ImageElement的色调/色相,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19282813/

10-10 06:00