HTML5画布将颜色应用于形状叠加的图像

Question

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

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

所以，基本上，我想通过叠加来指导我的着色。因此，当覆盖像素与主图像像素相遇时，我应该在主图像上应用颜色。至少我认为它是如何工作的。 请注意，叠加层与整个图像匹配，除了花边。

问题在于我想在应用颜色时保留主图像纹理。你可以看到它有皮革质地和真实的＆＃34;感觉我想保留。

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

谢谢！

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>