HTML5-Canvas gelten Farbe Bild, in dem Form-Overlays

Question

ich dieses Bild an einen HTML5-Canvas gezeichnet haben:

Was ich tun möchte, ist die Farbe anwenden davon nur ein Teil. Der Teil, wo ich Farbe anwenden möchten durch die folgende Overlay-Bild definiert:

Also, im Grunde würde Ich mag meine Färbung führen durch die Überlagerung. Wo also die Overlay-Pixel auf die Hauptbildpixel treffen, sollte ich eine Farbe auf das Hauptbild anwenden. Zumindest sehe ich das so. Beachten Sie, dass das Overlay dem gesamten Bild mit Ausnahme der Schnürung entspricht.

Der Haken ist, dass ich die Hauptbildtextur behalten möchte, während ich die Farbe anwende. Sie können sehen, dass es eine Lederstruktur und ein "echtes" Gefühl hat, das ich behalten möchte.

Können Sie mir bitte einige Methoden zeigen, dies zu erreichen oder einige Gedanken zu teilen?

Vielen Dank!

Answer 1

globalCompositeOperation ist dein Freund hier.

Im Grunde zeichnest du dein Overlay, dann stellst du den gCO auf Composite-Modus "Source-atop", damit alle zukünftigen Zeichnungen nur dort bleiben, wo bereits undurchsichtige Pixel gezeichnet wurden, also ist es wichtig, dass dein Overlay hat transparente Teile.
Dann füllen Sie einfach ein Rechteck Ihres gewünschten Befehls, und schließlich zeichnen Sie Ihr Originalbild entweder hinter oder mit der neuen Form, die wir gerade erstellt haben.

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>