Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Programmierkenntnisse der HTML5 Canvas API _html5-Tutorial

Programmierkenntnisse der HTML5 Canvas API _html5-Tutorial

WBOY
Freigeben： 2016-05-16 15:49:43
Original
1255 Leute haben es durchsucht


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.

Verwandte Etiketten：
api canvas html5
Quelle：php.cn
Vorheriger Artikel：HTML5 CSS3 implementiert ein Registrierungsformular. example_html5 Tutorial-Fähigkeiten Nächster Artikel：HTML5 arbeitet mit CSS3 zusammen, um ein Eingabefeld mit Eingabeaufforderungstext zu implementieren (js entfernen)_html5-Tutorial-Fähigkeiten
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage