Heim > Artikel > Web-Frontend > Programmierkenntnisse der HTML5 Canvas API _html5-Tutorial
Canvas beitreten
Transformieren
Derselbe Effekt wie oben kann durch Transformation (Zoom, Translation, Rotation) usw. erzielt werden.
Zeichnen Sie diagonale Linien mithilfe der Transformation
context.restore();
Pfad
Pfade in der HTML5 Canvas API stellen jede Form dar, die Sie rendern möchten.
beginPath(): Ganz gleich, mit welcher Art von Grafik Sie beginnen, das erste, was aufgerufen werden muss, ist beginPath. Diese einfache Funktion benötigt keine Parameter und wird verwendet, um die Leinwand darüber zu informieren, dass mit dem Zeichnen einer neuen Grafik begonnen wird.
moveTo(x,y): Verschieben Sie die aktuelle Position zu den neuen Zielkoordinaten (x,y), ohne zu zeichnen.
lineTo(x,y): Verschiebt nicht nur die aktuelle Position zu den neuen Zielkoordinaten (x,y), sondern zeichnet auch eine gerade Linie zwischen den beiden Koordinaten.
closePath(): Diese Funktion verhält sich sehr ähnlich wie lineTo. Der einzige Unterschied besteht darin, dass closePath automatisch die Startkoordinaten des Pfades als Zielkoordinaten verwendet. Außerdem wird der Leinwand mitgeteilt, dass die aktuell gezeichnete Form geschlossen ist oder einen vollständig geschlossenen Bereich bildet, was für zukünftige Füllungen und Striche sehr nützlich ist.
Zeichnen Sie ein Blätterdach einer Kiefer
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo( -5, -110);
context.lineTo(-15, -110);
//Die Eckpunkte des Baums
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, - 80);
context.lineTo(25, -50);
// Startpunkt verbinden, geschlossener Pfad
context.closePath();
}
function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
context.save();
context.translate(130, 250);
//Erstellen Sie einen Pfad, der das Blätterdach darstellt
createCanopyPath(context);
// Aktuellen Pfad zeichnen
context.Stroke();
Context.restore();
}
window.addEventListener("load", drawTrails, true);
Strichstil
Verwenden Sie den Strichmodus, um die Baumkrone realistischer aussehen zu lassen.
Füllstil
Zeichne ein Rechteck
Wir fügen dem Baum einen Stamm hinzu
Zeichnen Sie eine Kurve
// Die erste Kurve verläuft nach rechts oben
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);
//Kurve nach rechts unten
context.quadraticCurveTo(310, -250, 410, -250);
// Zeichnen Sie den Pfad in einem breiten braunen Strich
context.StrokeStyle = '#663300';
Context.lineWidth = 20;
Context.Stroke();
// Den vorherigen Canvas-Status wiederherstellen
context.restore();
Bilder in Canvas einfügen
Sie müssen warten, bis das Bild vollständig geladen ist, bevor Sie es bearbeiten können. Browser laden Bilder normalerweise asynchron, wenn das Seitenskript ausgeführt wird. Wenn Sie versuchen, das Bild auf der Leinwand zu rendern, bevor es vollständig geladen ist, sollte auf der Leinwand kein Bild angezeigt werden .
// Rufen Sie nach dem Laden des Bildes die Zeichenfunktion
bark.onload = function () {
drawTrails();
}
Bild anzeigen:
Verlauf
Die Verwendung von Farbverläufen erfordert drei Schritte:
(1) Verlaufsobjekt erstellen
(2) Legen Sie die Farbe für das Verlaufsobjekt fest und geben Sie die Übergangsmethode an
(3) Legen Sie den Verlauf für den Füllstil oder den Strichstil im Kontext fest
//Der linke Rand des Stammes ist im Allgemeinen braun
trunkGradient.addColorStop(0, '#663300');
// Die Farbe des mittleren linken Teils des Rumpfes muss besprochen werden
trunkGradient.addColorStop(0.4, '#996600');
//Die Farbe am rechten Rand sollte dunkler sein
trunkGradient.addColorStop(1, '#552200');
// Füllen Sie den Stamm mit Farbverlauf
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// Erstellen Sie einen vertikalen Farbverlauf zum Füllen Stamm mit dem Blätterdach Schatten auf dem Baumstamm
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// Der Startpunkt des Projektionsgradienten ist schwarz mit einer Transparenz von 50 %
canopyShadow.addColorStop(0, ' rgba(0, 0, 0, 0.5)');
// Der Farbverlauf geht innerhalb kurzer Zeit schnell in völlig transparent über
// über diese Länge hinaus.
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
// Füllen Sie den Baumstamm mit dem Projektionsverlauf
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);
Hintergrundbild
//Ersetze die dicke braune Linie durch ein Hintergrundbild
context.StrokeStyle = context.createPattern(gravel, 'repeat');
Context.lineWidth = 20;
Context.Stroke() ;
Der zweite Parameter von context.createPattern ist ein Wiederholbarkeitsmarker, und Sie können den entsprechenden Wert in Tabelle 2-1 auswählen.
平铺方式 | 意义 |
repeat | (默认值)图片会在两个方向平铺 |
repeat-x | 横向平铺 |
repeat-y | 纵向平铺 |
no-repeat | 图片只显示一次,不平铺 |
Zoom
Skalierungsfunktion context.scale(x,y): x und y repräsentieren die Werte in der x- bzw. y-Dimension. Wenn jeder Parameter ein Bild auf der Leinwand anzeigt, wird ihm der Betrag übergeben, um den das Bild auf der Richtungsachse vergrößert (oder verkleinert) werden soll. Wenn der x-Wert 2 beträgt, bedeutet dies, dass alle Elemente im gezeichneten Bild doppelt so breit werden. Wenn der y-Wert 0,5 beträgt, wird das gezeichnete Bild halb so hoch wie zuvor.
// Zeichne den zweiten Baum bei X=260, Y=500
context.save();
context.translate(260, 500);
//Vergrößern Sie die Höhe und Breite des zweiten Baums auf das Zweifache des ursprünglichen Werts
context.scale(2, 2);
drawTree(context);
context.restore();
Drehen
Bild drehen
context.restore();
Eine Möglichkeit, Transformation zu nutzen
// Der X-Wert erhöht sich mit zunehmendem Y-Wert.
// Sie können einen geneigten Baum erstellen, der als Schatten verwendet wird.
// Nach dem Anwenden der Transformation alle Koordinaten sind Multiplizieren mit Matrix
context.transform(1, 0,
-0.5, 1,
, 0);
// Ändern Sie in Richtung der Y-Achse die Schattenhöhe auf 60 % des ursprünglichen Werts
context.scale(1, 0.6);
// Füllen Sie den Stamm mit Schwarz mit einer Transparenz von 20 %
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);
//Den Baum mit dem vorhandenen Schatteneffekt neu zeichnen
createCanopyPath(context);
context.fill();
//Stellen Sie den vorherigen Canvas-Status wieder her
context.restore();
Text
context.fillText(text,x,y,maxwidth): Texttextinhalt, x,y gibt die Textposition an, maxwidth ist ein optionaler Parameter, der die Textposition begrenzt.
context.StrokeText(text,x,y,maxwidth): Texttextinhalt, x,y gibt die Textposition an, maxwidth ist ein optionaler Parameter, der die Textposition begrenzt.
//Die Schriftgröße beträgt 60 und die Schriftart ist Impact
context.font = "60px Impact";
//Füllfarbe
context.fillStyle = '#996600';
//Center
context.textAlign = 'center';
//Text zeichnen
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();
Schatten
Schatten können über mehrere globale Kontexteigenschaften gesteuert werden
属性 | 值 | 备注 |
shadowColor | 任何CSS中的颜色值 | 可以使用透明度(alpha) |
shadowOffsetX | 像素值 | 值为正数,向右移动阴影;为负数,向左移动阴影 |
shadowOffsetY | 像素值 | 值为正数,向下移动阴影;为负数,向上移动阴影 |
shadowBlur | 高斯模糊值 | 值越大,阴影边缘越模糊 |
// 15 Pixel nach rechts und 10 Pixel nach links verschieben
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
// Leicht verschwommener Schatten
context.shadowBlur = 2;
Pixeldaten
context.getImageData(sx, sy, sw, sh): sx, xy einen Punkt bestimmen, sw: Breite, sh: Höhe.
Diese Funktion gibt drei Attribute zurück: Breite, wie viele Pixel in jeder Zeile, Höhe, wie viele Pixel in jeder Spalte
Datengruppe von RGBA-Werten (Wert Rot, Grün, Blau und Transparenz), wobei jedes Pixel von Canvas erhalten wird.
context.putImageData(imagedata,dx,dy): Ermöglicht Entwicklern die Übergabe eines Satzes von Bilddaten, die zur Angabe des Offsets verwendet werden. Bei Verwendung springt die Funktion zur angegebenen Canvas-Position 🎜>
Zeigen Sie die eingehenden Pixeldaten an.canvas.toDataUrl: Die aktuell auf der Leinwand angezeigten Daten können programmgesteuert abgerufen werden. Die erhaltenen Daten werden im Textformat gespeichert und der Browser kann sie in ein Bild analysieren.