Latest web development tutorials

HTML5 Canvas

<Canvas> tag eigene Grafiken wie Diagramme und andere Bilder, müssen Sie ein Skript verwenden, Grafiken zu zeichnen.

In der Leinwand (Canvas) zeichnen ein rotes Rechteck, Gradient Rechteck, farbige Rechtecke und einige farbige Text.

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

Was ist Leinwand?

HTML5 <canvas> -Element wird verwendet, um Grafiken mit Hilfe von Skripten zu ziehen (in der Regel JavaScript) zu vervollständigen.

<Canvas> -Tag eine grafische Behälter ist, müssen Sie ein Skript verwenden, Grafiken zu zeichnen.

Sie können Canva zeichnen verwenden Pfade, Boxen, Kreise, Zeichen und das Hinzufügen von Bildern durch eine Vielzahl von Methoden.


Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen <canvas> -Element.

Hinweis: Internet Explorer 8 und frühere Versionen von IE - Browser nicht unterstützt <canvas> -Element.


Erstellen Sie eine Leinwand (Canvas)

Eine Leinwand-Seite ist ein Rechteck durch das <canvas> -Element gezogen wird.

Hinweis: Standard <canvas> -Element hat keinen Rand und Inhalt.

<Canvas> Einfache Beispiele sind wie folgt:

<canvas id="myCanvas" width="200" height="100"></canvas>

Hinweis: Das Etikett muss in der Regel ein id - Attribut angeben (das Skript häufig zitiert), Größe, Breite und Höhe Attribute definieren die Leinwand.

Tipp: Sie können mehrere <canvas> -Element in einer HTML - Seite verwenden.

Mit dem Attribut style einen Rahmen hinzuzufügen:

Beispiele

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Versuchen »


Verwenden Sie JavaScript Grafiken zu zeichnen

Canvas-Element Zeichnung selbst wird nicht mit Strom versorgt. Alle Arbeiten müssen in JavaScript gezogen werden intern durchgeführt:

Beispiele

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Versuchen »

Analyse Beispiele:

Suchen Sie zunächst das <canvas> -Element:

var c=document.getElementById("myCanvas");

Dann erstellen Sie das Kontextobjekt:

var ctx=c.getContext("2d");

getContext ( "2d") Objekt ist eine integrierte in HTML5 Objekt verfügt über mehrere Methoden zum Zeichnen von Pfaden, Boxen, Kreise, Zeichen und das Hinzufügen von Bildern.

Die folgenden zwei Codezeilen ein rotes Rechteck zu zeichnen:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle Eigenschaft festlegen, kann eine CSS Farbe, Farbverlauf oder Muster sein. fillStyle Standardeinstellung ist # 000000 (schwarz).

fillRect (x, y, Breite,Höhe) Verfahren definiert ein Rechteck mit dem aktuellen Verfahren gefüllt.


Leinwand-Koordinaten

Leinwand ist ein zweidimensionales Gitter.

Leinwand linken oberen Ecke die Koordinaten (0,0)

Das obige Verfahren hat fillRect Parameter (0,0,150,75).

Das bedeutet: Zeichnen Sie ein 150x75 Rechteck auf der Leinwand von der oberen linken Ecke (0,0).

Beispiele Koordinaten

Wie unten gezeigt, Koordinaten X und Y der Leinwand auf der Leinwand für die Malerei Positionierung. Die Bewegung der Maus Rechteck, Anzeige Standortkoordinaten.

X
Y

Leinwand - Pfad

Auf Leinwand Lackierstraße, werden wir die folgenden zwei Methoden verwenden:

  • moveTo(x, y) koordiniert eine Linie definieren , beginnend
  • lineTo(x, y) -Koordinaten das Ende der Leitung zu definieren ,

Zeichnen Sie eine Linie müssen wir die "Tinte" Methoden verwenden, wie Schlaganfall ().

Beispiele

Define Start Koordinaten (0,0), und Endkoordinaten (200, 100) und dann den Hub () Methode verwenden, um die Linie zu zeichnen:

Ihr Browser unterstützt kein HTML5 das <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Versuchen »

Zeichnen Sie einen Kreis in der Leinwand, werden wir die folgende Methode verwenden:

  • Bogen (x, y, r, Start, Stop)

In der Tat haben wir die "Tinte" Ansatz, wenn ein Kreis, wie Schlaganfall () oder füllen () zeichnen.

Beispiele

Verwenden Sie Bogen () -Methode einen Kreis zu zeichnen:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Versuchen »


Leinwand - Text

Verwenden Leinwand Text, wichtige Eigenschaften und Methoden zu zeichnen, wie folgt:

  • font - definieren Sie die Schriftart
  • fillText (Text, x, y)- Zeichnet einen festen Text auf Leinwand
  • strokeText (Text, x, y)- Zeichnung auf Leinwand hohlen Text

Verwenden Sie fillText ():

Beispiele

Verwenden Sie Schriftart "Arial" einen hohen 30px Text (fest) auf der Leinwand zu machen:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Versuchen »

Verwenden Sie strokeText ():

Beispiele

Verwenden Sie Schriftart "Arial" ein hoch 30px Text-Rendering (hohl) auf Leinwand:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Versuchen »


Leinwand - Gradient

Gradient können in Rechtecke, Kreise, Linien, Text, usw., verschiedene Formen können verschiedene Farben definieren gefüllt werden.

Hier sind zwei verschiedene Arten Leinwand-Gradient zu setzen:

  • createLinearGradient (x, y, x1,y1) - Erstellen Sie ein Linienverlauf
  • createRadialGradient (x, y, r,x1, y1, r1) - Erstellen Sie eine radial / Rund abgestuft

Wenn wir einen Gradienten-Objekt verwenden, müssen Sie zwei oder mehrere Stopp-Farbe.

addColorStop () -Methode Farbstopps zu spezifizieren, verwenden Sie koordiniert die Parameter zu beschreiben, die 0-1 sein kann.

Mit der Gradient Einstellung fillStyle oder stroke Wert Steigung, und dann Formen zu zeichnen, wie Rechtecke, Text oder einer Linie.

Verwenden Sie createLinearGradient ():

Beispiele

Erstellen Sie einen linearen Gradienten. Verwenden Sie graduelle Füllung Rechteck:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Versuchen »

Verwenden Sie createRadialGradient ():

Beispiele

Erstellen Sie eine radial / kreisförmigen Gradienten. Verwenden Sie graduelle Füllung Rechteck:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Versuchen »


Leinwand - Bilder

Die ein Bild auf die Leinwand, die folgenden Methoden verwenden:

  • drawImage(image, x, y)

Verwenden Sie ein Bild:

Der Schrei

Beispiele

Das Bild wird auf einer Leinwand platziert:

Ihr Browser unterstützt nicht das HTML5 <canvas> -Element.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Versuchen »


HTML-Canvas-Referenzhandbuch

Vollständige Eigenschaft des Etiketts kann sich beziehen Leinwand - Referenzhandbuch.

Der HTML-Code <canvas> Tag

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。