Heim > Web-Frontend > H5-Tutorial > HTML5 Canvas-Textfüllung, Liniensegmentattribute, Zuschneide-, Transparenz- und Pixelzusammenführungsmethoden

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

黄舟
Freigeben: 2017-02-27 15:38:18
Original
2792 Leute haben es durchsucht


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>
Nach dem Login kopieren
var canvas = document.getElementById(&#39;myCanvas&#39;),
    ctx = canvas.getContext(&#39;2d&#39;);
Nach dem Login kopieren

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

ctx.fillStyle = &#39;red&#39;;
ctx.font = &#39;50px sans-serif&#39;;
ctx.fillText(&#39;hello world!&#39;, 100, 100);
Nach dem Login kopieren

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(&#39;hello world!&#39;).width);
Nach dem Login kopieren

Liniensegmentattribut

Liniensegmentüberlagerung

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

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

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

ctx.beginPath();
ctx.lineCap = &#39;round&#39;;
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();
Nach dem Login kopieren

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 = &#39;miter&#39;; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
Nach dem Login kopieren


ctx.lineWidth = 40;
ctx.lineJoin = &#39;round&#39;; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
Nach dem Login kopieren


ctx.lineWidth = 40;
ctx.lineJoin = &#39;bevel&#39;; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
Nach dem Login kopieren


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;
Nach dem Login kopieren

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);
Nach dem Login kopieren



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);
Nach dem Login kopieren

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 = &#39;blue&#39;;
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = &#39;source-over&#39;;
ctx.fillStyle = &#39;red&#39;;
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();
Nach dem Login kopieren

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!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage