Programmierkenntnisse der HTML5 Canvas API _html5-Tutorial

Code kopieren

Der Code lautet wie folgt:

Canvas beitreten

Code kopieren

Der Code lautet wie folgt:

//Holen Sie sich das Canvas-Element und sein Zeichenkontext var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Absolute Koordinaten verwenden, um einen Pfad zu erstellen
context.beginPath( );
context.moveTo(70, 140);
context.lineTo(140, 70);
//Zeichne diese Linie auf Canvas
context.Stroke();

Transformieren

Derselbe Effekt wie oben kann durch Transformation (Zoom, Translation, Rotation) usw. erzielt werden.

Zeichnen Sie diagonale Linien mithilfe der Transformation

Code kopieren

Der Code lautet wie folgt:

//Holen Sie sich das Canvas-Element und sein Zeichnungskontext
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Speichern Sie den aktuellen Zeichnungsstatus
context.save ();
//Verschieben Sie den Zeichenkontext nach rechts unten
context.translate(70, 140);
//Zeichnen Sie mit dem Ursprung als Ausgangspunkt das gleiche Liniensegment wie zuvor
context.beginPath();
context .moveTo(0, 0);
context.lineTo(70, -70);
context.Stroke();

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

Code kopieren

Der Code lautet wie folgt:

function createCanopyPath(context) {
// Baumkronen zeichnen
context.beginPath();

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.

Code kopieren

Der Code lautet wie folgt:

//Zeile erweitern
context .lineWidth = 4;
//Der Verbindungspunkt des glatten Pfades
context.lineJoin = 'round';
//Color
context.StrokeStyle = '#663300';
//Aktuellen Pfad zeichnen
context.Stroke();

Füllstil

context.fillStyle = "#339900"; context.fill();

Zeichne ein Rechteck

Wir fügen dem Baum einen Stamm hinzu

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

Zeichnen Sie eine Kurve

Code kopieren

Der Code lautet wie folgt:

context.save();
context.translate(-10, 350);
context.beginPath();

// 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 .

Code kopieren

Der Code lautet wie folgt:

// Bild laden
var bark = new Image();
bark.src = "bark.jpg";

// Rufen Sie nach dem Laden des Bildes die Zeichenfunktion
bark.onload = function () {
drawTrails();
}

auf

Bild anzeigen:

//Mit Hintergrundmuster als Hintergrund des Baumstamms füllen context.drawImage(bark, -5, -50, 10, 50);

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

Kopieren Sie den Code

Der Code lautet wie folgt:

// Erstellen Sie eine Drei -dimensionale Baumstammtextur Horizontaler Farbverlauf ordnen
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

//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

Code kopieren

Der Code lautet wie folgt:

// Bild laden
var Gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}

//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.

Code kopieren

Der Code lautet wie folgt:

// Bei X=130 , Y= Zeichne den ersten Baum bei 250
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();

// 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

Code kopieren

Der Code lautet wie folgt:

context.save();
//Der Drehwinkelparameter ist im Bogenmaß angegeben
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

Eine Möglichkeit, Transformation zu nutzen

Code kopieren

Der Code lautet wie folgt:

// Aktuellen Status speichern
context .save();

// 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.

Code kopieren

Der Code lautet wie folgt:

// Text auf Leinwand zeichnen
context.save();

//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	高斯模糊值	值越大，阴影边缘越模糊

Code kopieren

Der Code lautet wie folgt:

// Farbe Schwarz, 20 % Transparenz
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// 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.