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>