Canvas globalCompositeOperation

Wenn ein Objekt (Quelle) über einem anderen Objekt (Ziel) in Canvas gezeichnet wird, überlagert der Browser standardmäßig einfach das Bild des Quellobjekts über das Bild des Zielobjekts.

Einfach ausgedrückt: In Canvas können Sie durch Kombinieren der Bildquelle und des Zielbilds über globalCompositeOperation -Operation in Canvas verschiedene Effekte erzielen, wie zum Beispiel die folgende Abbildung:

Wie im Bild oben gezeigt, verwandeln sich der rote Apfel und der schwarze Kreis durch destination-out von globalCompositeOperation in einen angebissenen roten Apfel. Mit anderen Worten: Durch die Bildsynthese in Canvas können wir einige einzigartige Effekte erzielen, beispielsweise möchten wir einen Rubbellos-Lotterieeffekt erzeugen. Heute lernen wir, wie man die Bildsynthese in Canvas verwendet.

Es gibt insgesamt 26 Arten von Werten für das globalCompositeOperation Attribut in Canvas. Natürlich werden die Effekte unterschiedlich sein und einige Effekte werden im Browser möglicherweise nicht normal gerendert. Aber das spielt keine Rolle, lassen Sie uns einfach die Bedeutung und Wirkung dieser 26 Typen verstehen.

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red' ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill();

Der obige Code zeichnet einen roten Kreis mit einem Radius von 80px auf der Canvas-Leinwand, die hier als Bildquelle bezeichnet wird.

 ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.fill(); ();

Dieser Code zeichnet einen orangefarbenen Kreis mit einem Radius von 80px auf der Canvas-Leinwand, die hier als Bildziel bezeichnet wird. Durch Festlegen des Werts von globalCompositeOperation zwischen der Bildquelle und dem Zielbild kann der Bildsynthesevorgang abgeschlossen werden:

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red' ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'orange'; ctx.arc(40, 20, 80, 0, Math.PI * 2, true); (); ctx.restore();

Der zu diesem Zeitpunkt erzielte Effekt ist wie folgt:

source-over ist der Standardwert der globalCompositeOperation -Eigenschaft. Die Quellgrafik überdeckt die Zielgrafik. Die Quellgrafik wird in den undurchsichtigen Teilen der Quellgrafik angezeigt, und die Zielgrafik wird im Rest angezeigt.

source-in : Nur die Teile der Zielgrafik und der Quellgrafik, die sich überlappen und undurchsichtig sind, werden gezeichnet.

source-out : Der nicht überlappende Teil der Zielgrafik und der Quellgrafik wird gezeichnet.

source-atop : Die Zielgrafiken im überlappenden Teil des Inhalts der Zielgrafiken und der Quellgrafiken werden gezeichnet.

destination-over : Die Zielgrafiken hinter den Zielgrafiken und der Inhalt der Quellgrafiken werden gezeichnet.

destination-in : Der überlappende Teil der Zielgrafik und der Quellgrafik bleibt erhalten (Quellgrafik), der Rest wird transparent angezeigt

Die anderen werden nicht einzeln angezeigt. Die spezifische Beschreibung zu jedem Wert finden Sie hier.

Es gibt zwei Eigenschaften globalAlpha und globalCompositeOperation in Canvas, um Bildsynthesevorgänge zu steuern:

• globalAlpha : Legen Sie die Transparenz des Bildes fest. Die globalAlpha Eigenschaft ist standardmäßig auf 1 eingestellt, was vollständige Deckkraft anzeigt, und kann von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) eingestellt werden. Dieser Wert muss vor dem Zeichnen des Diagramms festgelegt werden
• globalCompositeOperation : Der Wert dieses Attributs steuert das Zeichnen von Grafiken in der aktuellen Canvas-Bitmap, nachdem globalAlpha und alle Transformationen wirksam geworden sind.

In unserem täglichen Geschäft sehen wir oft Lotterieeffekte wie Rubbellose. Wenn wir dafür Canvas verwenden, verwenden wir die Synthese von Canvas-Bildern.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

Wir zeigen den Preis (sofern es sich um ein Bild handelt) als Hintergrund div#card . Zeichnen Sie dann zunächst ein graues Rechteck (Quellbild) in Canvas, zeichnen Sie dann dynamisch durch Mausereignisse (oder Berührungsereignisse) ein neues Bild (ähnlich einem Pinsel) und setzen Sie den Wert des Attributs globalCompositeOperation auf destination-out “ (neu). draw Die nicht überlappenden Teile der Grafik und der Grafikinhalt, der bereits im Ziel-Canvas vorhanden ist, bleiben erhalten. Wenn die Pinsellöschung einen bestimmten Anteil überschreitet, löschen Sie das <canvas> -Element oder verwenden Sie clearRect() um die Canvas-Leinwand zu löschen. um den div Hintergrund anzuzeigen

In diesem Artikel stellen wir hauptsächlich die Bildsynthese von Canvas vor. In Canvas kann der Bildsynthesevorgang über zwei Attribute gesteuert werden, globalAlpha und globalCompositeOperation, um den Bildsyntheseeffekt zu erzielen. Ich hoffe, dass es zum Lernen aller beitragen wird, und ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.