以相同的颜色在Canvas中为灰度图像着色Unity着色精灵？

如何解决以相同的颜色在Canvas中为灰度图像着色Unity着色精灵？

我正在按照How to re-tint a grayscale image on canvas上的教程在画布上着色图像。 我在项目中成功应用了这种效果。它甚至看起来还不错，实际上还不错。 但是，我很快注意到它的色彩不是很有效。 比较统一着色同一精灵的方式与对我提到的问题的影响：

在Unity游戏中：

这就是我在javascript画布中获得的效果：

（这也适用于皮肤，非常苍白而明亮。相同的十六进制代码）

这是一个极端的差异。

此处提供了我当前用于在画布上为对象着色的功能：

代码内注释的解释

function colorImage(img,w,h,color) { // Image Instance,Width,Height,Color
    var cvsImage = document.createElement('canvas'); // Create a new canvas for applying the effect
    var ctxImage = cvsImage.getContext("2d");
    cvsImage.width = img.width; // Match canvas to img size
    cvsImage.height = img.height;
    ctxImage.drawImage(img,0); // start color replacement
    ctxImage.globalCompositeOperation = 'source-atop';
    ctxImage.fillStyle = color;
    ctxImage.fillRect(0,img.width,img.height);  
    ctxImage.globalCompositeOperation = 'source-over'; // end color replacement
    ctx.drawImage(img,h); // Outside of the function,you then Draw the new canvas
    ctx.globalCompositeOperation = 'color';
    return cvsImage; // returns the temp canvas so I can draw that canvas onto my current canvas
}

// An example of how this is used:

function drawHair(num) {
    // Special function I use to retrieve the character images
    var hair = loadImage(`hair/${hairTypes[num].hair}`,false,() => {
        // Im using the colorImage function above here
        var hairColored = colorImage(hair,config.width / 2 - hair.width / 2 + (hairTypes[num].pos[0]),config.height / 4 - hair.height / 2 + (hairTypes[num].pos[1]),config.hairTone);
        // Drawing the canvas that gets returned by the colorImage function
        ctx.drawImage(hairColored,config.height / 4 - hair.height / 2 + (hairTypes[num].pos[1]));
        // Applying the effect
        ctx.globalCompositeOperation = 'source-over';
    });
}

如果您有兴趣或需要，这里是带有所有当前代码的项目：https://codepen.io/SkylerSpark/pen/wvGgxOm