Das HTML <canvas> Element wird verwendet , Grafiken auf einer Webseite zu ziehen.
Die Grafik auf der linken Seite wird mit erstellt <canvas> . Es zeigt vier Elemente: ein rotes Rechteck, ein Rechteck-Gradienten, ein mehrfarbiges Rechteck, und ein Mehrfarben Text.
Was ist HTML Canvas ?
Das HTML <canvas> Element wird verwendet , um Grafiken zu zeichnen, on the fly, über Scripting (usually JavaScript) in der (usually JavaScript) .
Das <canvas> Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um tatsächlich die Grafiken zu zeichnen.
Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Boxen, Kreise, Text und Hinzufügen von Bildern.
Das Canvas-Element ist ein Teil von HTML5 und ermöglicht einen dynamischen, skriptfähige Rendering von 2D-Formen und Bitmap-Bildern. Es ist ein niedriges Niveau, Vorgehensmodell, das eine Bitmap aktualisiert und nicht über ein integriertes in Szenengraph hat.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die das voll unterstützt <canvas> Element.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Geschichte
Canvas wurde ursprünglich von Apple für die Verwendung in ihrer eigenen Mac OS X WebKit-Komponente 2004 Speisung Anwendungen wie Dashboard Widgets und die Safari-Browser eingeführt.
Später wurde in der Version 1.8 von Gecko-Browser und Opera im Jahr 2006 und standardisiert von der Web Hypertext Application Technology Working Group (WHATWG) auf neu vorgeschlagenen Spezifikationen für die nächste Generation Web-Technologien im Jahr 2005 angenommen.
Verwendung
Segeltuch besteht aus einem ziehbaren Bereich definiert in HTML-Code mit in Höhe und Breite Attributen. JavaScript-Code kann der Bereich durch eine ganze Reihe von Zeichenfunktionen ähnlich denen von anderen gängigen 2D-APIs zugreifen, so dass für dynamisch generierte Grafiken ermöglicht.
Einige erwarteten Verwendungen von Leinwand gehören Gebäude Grafiken, Animationen, Spiele und Bildkomposition.
Canvas - Beispiele
Eine canvas ist ein rechteckiger Bereich auf einer HTML - Seite. Standardmäßig wird eine canvas hat keine Grenze und keinen Inhalt.
Das Markup sieht wie folgt aus:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Immer ein id - Attribut angeben (to be referred to in a script) , und eine Breite und Höhe führen die Größe der definieren canvas .
Um einen Rahmen hinzuzufügen, verwenden Sie das style - Attribut:
Grund Canvas Beispiel
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Versuch es selber " Zeichnen mit JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Versuch es selber " Zeichne eine Linie
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Versuch es selber " Zeichnen Sie einen Kreis
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Versuch es selber " Zeichnen Sie einen Text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Versuch es selber " Stroke Text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Versuch es selber " Zeichnen Sie Linear Gradient
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); Versuch es selber " Zeichnen Rund Gradient
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); Versuch es selber " zeichnen Bild
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Versuch es selber " HTML Canvas Tutorial
Um alles über HTML lernen <canvas> , Besuchen Sie unsere vollständigen HTML - Canvas - Tutorial .