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
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);
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
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
Hier schneide ich die Leinwand in einen Kreis
ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);
Transparenz
ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);
Pixelzusammenführung
globalCompositeOperation wird verwendet, um dieEs 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!