HTML5 Canvas-Textfüllung, Liniensegmentattribute, Zuschneide-, Transparenz- und Pixelzusammenführungsmethoden

Viele Eigenschaften in CSS3 können mit einigen Eigenschaften unserer Leinwand verglichen werden
Viele Eigenschaften des Umgebungsobjekts „Pinsel“ in Leinwand können mit Eigenschaften in CSS3 verglichen werden
Wir Sie können nicht nur nur Grafiken zeichnen, sondern auch Text zur Leinwand hinzufügen

Textfüllung

In ähnlicher Weise zuerst das Elementobjekt und das Umgebungsobjekt abrufen

<canvas id="myCanvas" width=500 height=500></canvas>

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

Schriftart zum Festlegen des Schriftartattributs
fillText legt den Volltext und die Position fest
StrokeText legt den Hohltext und die Position fest

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

Schriftart kann sich auf das Schriftartattribut von CSS beziehen
Standardwert '10px sans-serif'

---

Es gibt auch eine Methode zum Messen der Textbreite, kennen Sie sie einfach
measureText()

console.log(ctx.measureText('hello world!').width);

Liniensegmentattribut

Liniensegmentüberlagerung

lineCap() wird verwendet, um das Liniensegmentabdeckungsattribut
festzulegen, das drei Werte hat: Stoß/Quadrat/Rund

ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

Die grauen Linien im Bild sind das, was ich
so hinzugefügt habe. Sie können drei wertvolle Unterschiede erkennen

Liniensegmentverbindung

lineJoin () definiert das Verhalten der Liniensegmentverbindung
Es gibt auch drei Werte: Gehrung/Rund/Abschrägung

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

Wenn wir die Standardgehrung verwenden
Wenn der Winkel zwischen den beiden Liniensegmenten sehr klein ist
Das „scharfe“ " wird immer größer

Wenn es „scharf“ ist „Wenn es ein bestimmtes Niveau erreicht, wird der Standardwert immer größer

. Wir können es so einstellen, dass es diese Grenze überschreitet. Verwenden Sie miterLimit
, damit die Länge des Standardwerts von uns auf *lineWidth/2
festgelegt wird 🎜>

ctx.miterLimit = 30;

Zuschneiden

Das Clip-Attribut bedeutet, dass der Bereich außerhalb des aktuellen Pfads nicht mehr gezeichnet wird

Es entspricht dem Ausschneiden des aktuellen Bereichs aus der Leinwand

Hier schneide ich die Leinwand in einen Kreis

Auf diese Weise kann beim Füllen des Rechtecks ​​nur diese „kreisförmige Leinwand“ ausgefüllt werden

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

Transparenz

Verwenden Sie globalAlpha, um globale Transparenz festzulegen

Das ist sehr einfach und es bedarf keiner Erklärung

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

Pixelzusammenführung

globalCompositeOperation wird verwendet, um die

Zusammenführungsmethode für neue Grafikpixel und alte Grafikpixel festzulegen

Es hat 11 Werte

Es gibt 3 häufige Werte: Quelle-über (Standard)/Ziel-über /copy
souce-over bedeutet, dass die später gezeichneten Grafiken über die zuerst gezeichneten Grafiken gelegt werden
destination-over bedeutet, dass die zuerst gezeichneten Grafiken über die später gezeichneten Grafiken gelegt werden
copy ist das Es werden nur die später gezeichneten Grafiken angezeigt. Grafiken (Grafiken zuerst zeichnen und dann verschwinden)
Andere Werte sind theoretisch so (verschiedene Browser haben unterschiedliche Implementierungsebenen oder -methoden)

ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

Nachfolgend gebe ich die 11 Werte an, die ich auf der neuesten Chrome-Version getestet habe, als Referenz

Quelle:

Ziel-über:

Kopie:

Feuerzeug:

xor:

source-atop:

destination-atop:

source-in :

Ziel -in:

source-out:

destination-out:

Das Obige ist der HTML5-Canvas Text Informationen zu Füllung, Liniensegmentattributen, Zuschneiden, Transparenz und Pixelzusammenführungsmethoden finden Sie auf der chinesischen PHP-Website (www.php.cn), um weitere verwandte Inhalte zu erhalten!