HTML5 画布将颜色应用于形状覆盖的图像

Question

我将此图像绘制到 HTML5 画布上：

我想做的是将颜色应用到它的一部分。我要应用颜色的部分由以下叠加图像定义：

所以，基本上，我想通过叠加来指导我的着色。所以在叠加像素与主图像像素相交的地方，我应该在主图像上应用一种颜色。至少我认为它是这样工作的。请注意，除了系带外，覆盖层与整个图像相匹配。

问题是我想在应用颜色时保留主图像纹理。您可以看到它具有皮革质地和我想要保留的“真实”感觉。

你能告诉我一些实现这一目标的方法或分享一些想法吗？

谢谢！

Answer 1

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>