Verwenden Sie ein Muster, um ein Bild in HTML5/JS zu zeichnen

Question

Ich habe ein Projekt, an dem ich gerade arbeite, für das ich keine Lösung für Google scheinen kann. Ich habe einen HTML-Canvas, ich benutze ctx.drawImage(), um ein paar Bilder zu stapeln, das Problem, das ich habe ist, ich kann nicht herausfinden, wie ein Bild speziell this, mit einem Muster wie this. Gibt es das eh einfach, oder müsste ich versuchen, die Image-Server-Seite zu generieren und sie dann zum Client zu ziehen?

Die Reihenfolge der Bilder bin ich versucht zu ziehen ist wie folgt:

• Hintergrundfarbe
• Eine abgerundete Maske
• Die erste verknüpfte Bild (das ist die eine, die ich mit einem Muster zeichnen mag)

Ich versuche, die ersten beiden Ebenen sichtbar zu machen und nur den nicht transparenten Teil des dritten mit der Musterdatei zu überdecken. Alle Ebenen müssen die Teile, die transparent sein müssen, als transparent festlegen.

Answer 1

Aktualisiert zusätzliche Bedingungen erfüllen hinzugefügt, da diese Antwort auf Frage wurde zuerst veröffentlicht:

Sie erklären nicht, ob die abgerundete Maske gefüllt oder transparent Zentrum aber folgendes annimmt Zentrum gefüllt:

• Zeichnungsbuchstabe Bild
• Change comp. Modus zu "source-atop" (siehe alte Antwort unten auf how-to)
• Zeichnen Muster. Sie haben jetzt das Muster in der Form des Buchstabens.
• Ändern comp. Modus auf "destination-over"
• Zeichnen Sie die Maske, diese wird "hinter" dem vorhandenen Inhalt enden
• Füllen Sie Leinwand mit Hintergrundfarbe mit gleichen comp. Modus.

alte Antwort

Sicher, um das erste Bild zeichnen, sofern sie einen Alphakanal aufweist, auf die Leinwand.

Ändern Sie dann zusammengesetzten Modus zu source-atop (source-in kann auch verwendet werden, aber es wird vorhandenen Inhalt entfernen, die unter den neuen Pixel nicht am Ende):

ctx.globalCompositeOperation = "source-atop"; 

Dann wird das zweite Bild auf zeichnen. Um zurück in den normalen Modus zu wechseln:

ctx.globalCompositeOperation = "source-over";