Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5-Canvas-Achsenkonvertierung, Musterfüllung, Farbverlauf und Schatten

黄舟
Freigeben: 2017-02-27 15:34:55
Original
2921 Leute haben es durchsucht


Im vorherigen Artikel haben wir etwas über das grundlegende Zeichnen von Grafiken auf Leinwand gelernt
Jetzt schauen wir uns einige verwandte Operationen an

Koordinatenachsentransformation

Wir Die Standardkoordinatenachsen im Canvas sind die gleichen wie die Browser-Koordinatenachsen
Die positive X-Achse zeigt nach rechts
Die positive Y-Achse zeigt nach unten
Aber wir können die Canvas-Koordinatenachse manuell festlegen Transformation
Zuerst bekommen wir noch „ „Leinwand“ und „Pinsel“

<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

Zeichne zuerst ein Quadrat in die Leinwand

ctx.fillStyle = &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren

Ich habe es im Bild markiert. Die Koordinatenachse der Leinwand

Übersetzung

Verwenden Sie die Methode translator(dx, dy), um die Koordinatenachse zu übersetzen
Die Parameter sind die x-Achsen-Translationsabstand und y-Achsen-Translationsabstand

ctx.translate(100, 100);
ctx.fillStyle = &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren

Skalierung

Verwenden Sie die Skalierungsmethode (sx, sy), um die Koordinate zu erweitern Achse
Die Parameter sind die Skalierungsfaktoren der x-Achse und der y-Achse
Die Koordinaten sind auch gleich Verhältnisskalierung

ctx.scale(1.2, 1.2);
ctx.fillStyle = &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren

Rotation

Verwenden Sie die Rotationsmethode (Grad), um die Koordinatenachse zu drehen

ctx.rotate(Math.PI/12);
ctx.fillStyle = &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren

Speichern und wiederherstellen

Bevor Sie die Koordinatenachsen ändern
Wir verwenden save(), um die vorherigen Canvas-Koordinatenachsen zu speichern
und dann verwenden wir restart(), um die Koordinatenachsen auf die vorherige wiederherzustellen. Es sieht aus wie

ctx.save(); //保存之前的正常坐标轴ctx.rotate(Math.PI/12);
ctx.fillStyle = &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
ctx.restore();//恢复到正常坐标轴ctx.fillStyle = '#000';
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren


Zum Verständnis gibt es zwei Möglichkeiten, die Koordinatenachsen zu transformieren
setTransform(a, b, c, d, e, f)
Diese Methode setzt die Koordinatenachse zurück und transformiert sie dann
transform(a, b, c, d, e, f)
Diese Methode transformiert es basierend auf der vorherigen Koordinatenachse

Beide Methoden werden durch die Transformationsmatrix
a c e
ersetzt b d f
0 0 1
ähnelt der Grafiktransformation von CSS3. Die
-Parameter repräsentieren jeweils: horizontale Skalierung, horizontale Neigung, vertikale Neigung, vertikale Neigung, vertikaler Zoom, horizontale Bewegung, vertikale Bewegung

Musterfüllung

Jetzt füge ich der Seite zunächst ein Bildelement hinzu

<img src="./images/lamp.gif">
Nach dem Login kopieren

Wir können dieses Bild in unsere Leinwand füllen
Verwenden Sie createPattern(img/canvas/video, „repeat“/“no-repeat“/“repeat-x“/“repeat- y“)

var img = document.getElementsByTagName(&#39;img&#39;)[0];var pt = ctx.createPattern(img, &#39;repeat&#39;);
ctx.fillStyle = pt;
ctx.fillRect(0, 0, 500, 500);
Nach dem Login kopieren

It gibt das CanvasPattern-Objekt zurück
Definiert die Füllregeln
Zusätzlich zum IMG-Tag können wir auch Canvas- und Videoelemente füllen
Die Verwendungsmethode ist die gleiche

Verlauf

Ähnlich dem Farbverlauf in CSS3
Der Farbverlauf im Canvas ist ebenfalls in linearen Farbverlauf und radialen Farbverlauf unterteilt
Ähnlich wie bei der Musterfüllung müssen wir unsere Farbverlaufsregeln definieren

Linearer Farbverlauf

createLinearGradient(x1, y1, x2, y2)
bedeutet, einen linearen Farbverlauf von einem Punkt zu einem anderen zu definieren
gibt ein CanvasGradient()-Objekt zurück
enthält addColorStop(), um unsere Farbverlaufsfarbe zu definieren
0 ist der Startpunkt, 1 ist der Endpunkt

var lGradient = ctx.createLinearGradient(0, 0, 0, 250);
lGradient.addColorStop(0, &#39;#000&#39;);
lGradient.addColorStop(1, &#39;#fff&#39;);
ctx.fillStyle = lGradient;
ctx.fillRect(0, 0, 500, 250);
Nach dem Login kopieren


Beachten Sie, dass definiert ist. Der Verlauf muss im Verlaufsbereich angezeigt werden

Radialer Gradient

createRadialGradient(x1, y1, r1, x2, y2, r2)
Im Vergleich zum linearen Gradienten gibt es zwei weitere Punktradiusparameter
Ansonsten ist die Verwendung dieselbe wie oben
Keine weitere Erklärung
Zum Beispiel können wir einen konzentrischen Kreis mit Farbverlauf zeichnen

var rGradient = ctx.createRadialGradient(250, 250, 100, 250, 250, 250);
rGradient.addColorStop(0, &#39;#fff&#39;);
rGradient.addColorStop(0.5, &#39;#000&#39;);
rGradient.addColorStop(1, &#39;#fff&#39;);
ctx.fillStyle = rGradient;
ctx.fillRect(0, 0, 500, 500);
Nach dem Login kopieren

Schatten

Analog zum Kastenschatten Eigenschaft in CSS3
In Canvas verwenden wir
shadowColor, um die Schattenfarbe zu definieren
shadowOffsetX/Y, um den Schatten-Offset zu steuern
shadowBlur definiert den Schattenunschärferadius
Es sollte beachtet werden
Der Versatz des Schattens wird durch die Koordinatensystemtransformation nicht beeinflusst

ctx.shadowColor = &#39;#000&#39;;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 30;
ctx.shadowBlur = 30;
ctx.fillStyle= &#39;#f40&#39;;
ctx.fillRect(100, 100, 300, 300);
Nach dem Login kopieren

Es bezieht sich auf das Festlegen des Schattens. Nach dem Hinzufügen des Attributs kann fillRect zum Zeichnen eines schattierten Rechtecks ​​

Das Obige ist der Inhalt der HTML5-Canvas-Koordinatenachsenkonvertierung, Musterfüllung, Farbverlauf und Schatten. Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website )!



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