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

Question

我正在为我的游戏引擎制作一些粒子动画，我想知道是否可以更改画布的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（）”（绘制矩形） only）应用转换和图像对象。

结果如下:(红色颗粒是半透明圆圈）

是否有其他方法仅为图像形状着色或直接修改对象，因此转换仅适用于图像的可见部分？

Answer 1

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

double hue = 0.8;

var data = _context.getImageData(0, 0, _canvas.width, _canvas.height);
var pixels = data.data;
List<double> hsl;
List<int> newPixel;

for(var i = 0, len = pixels.length; i < len; i += 4) {
  hsl = rgbToHsl(pixels[i + 0], pixels[i + 1], pixels[i + 2]);

  newPixel = hslToRgb(h, hsl[1], hsl[2]);
  // or newPixel = hslToRgb((hsl[0] + hue) % 1.0, hsl[1], hsl[2]);

  pixels[i + 0] = newPixel[0];
  pixels[i + 1] = newPixel[1];
  pixels[i + 2] = newPixel[2];
}
_context.putImageData(data, 0, 0);

另一种方法，使用你的方法，可以额外使用你的基础图像作为具有改变的色调的画布的掩码。您必须遍历像素并将pixel[i + 3]更改为基本图像的alpha。但您不必在HSL和RGB之间进行转换。

Answer 2

您应该使用globalCompositeOperation模式。 首先绘制图像，然后使用globalAlpha和 globalCompositeOperation ='source-atop'。

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

所以你可以玩这些模式，使用浅色调来减轻颜色 图像或目标位置以添加背景 但要注意一些模式不适用于所有浏览器，我测试的颜色较深 一个月前，当时没用。