我将这张图片绘制到 HTML5 画布上：
我想做的只是将颜色应用于其中的一部分。 我要应用颜色的部分由以下叠加图像定义：
所以，基本上，我想通过叠加来指导我的着色。因此，在覆盖像素与主图像像素相遇的地方，我应该在主图像上应用颜色。至少我认为它是这样工作的。 请注意，叠加层与整个图像匹配，但鞋带除外。
问题是我想在应用颜色时保留主要图像纹理。您可以看到它具有皮革质感和我想要保留的“真实”感觉。
您能告诉我一些实现这一目标的方法或分享一些想法吗？
谢谢！
【问题讨论】：
标签： html html5-canvas
globalCompositeOperation 是你的朋友。
基本上，您绘制叠加层，然后将 gCO 设置为“source-atop”复合模式，这将使您未来的所有绘图仅停留在已经绘制不透明像素的位置，因此重要的是您的叠加层具有透明部件。
因此，您只需填充所需命令的矩形，最后绘制原始图像，无论是在后面，还是与我们刚刚创建的新形状混合。
var ctx = canvas.getContext('2d');
var loaded = 0;
function onload(){
if(++loaded === 2){
canvas.width = this.width;
canvas.height = this.height;
ctx.font = "40px sans-serif";
draw();
}
}
var original = new Image();
var overlay = new Image();
original.onload = overlay.onload = onload;
original.src = 'https://i.stack.imgur.com/vIKpI.png';
overlay.src = 'https://i.stack.imgur.com/10Tre.png';
// list of blending modes.
// Note that destination-over is a composite mode,
// which place the new drawings behind the already-there ones
var currentMode = 0;
var modes = ['destination-over', 'lighter', 'multiply', 'screen', 'overlay', 'darken',
'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
'exclusion', 'hue', 'saturation', 'color', 'luminosity' ];
function draw(){
// switch between different Blending modes
var mode = modes[currentMode];
currentMode = (currentMode+1)%(modes.length);
// clear previous
ctx.clearRect(0,0,canvas.width, canvas.height);
// draw our overlay
ctx.drawImage(overlay, 0,0);
// this will keep new drawings only where we already have existing pixels
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'red';
ctx.fillRect(0,0,canvas.width, canvas.height);
// now choose between the list of blending modes
ctx.globalCompositeOperation = mode;
// draw our original image
ctx.drawImage(original, 0,0);
// go back to default
ctx.globalCompositeOperation = 'source-over';
// just so we can know which one is shown
ctx.fillStyle = 'black';
ctx.fillText(mode, 40,40)
// do it again
setTimeout(draw, 1000)
}canvas{
width: 100%;
}<canvas id="canvas"></canvas>【讨论】：