html5-canvas Tutorial
Erste Schritte mit html5-canvas

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG

So fügen Sie das Html5-Canvas-Element zu einer Webseite hinzu

Html5-Canvas ...

Ist ein Html5-Element.
Wird in den meisten modernen Browsern (Internet Explorer 9+) unterstützt.
Ist ein sichtbares Element, das standardmäßig transparent ist
Hat eine Standardbreite von 300px und eine Standardhöhe von 150px.
Erfordert JavaScript, da der Inhalt programmatisch zum Canvas hinzugefügt werden muss.

Beispiel: Erstellen Sie ein Html5-Canvas-Element mit Html5-Markup und JavaScript:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

Leinwandgröße und Auflösung

Die Größe einer Leinwand ist der Bereich, den sie auf der Seite einnimmt, und wird durch die CSS-Eigenschaften width und height definiert.

canvas {
   width : 1000px;
   height : 1000px;
}

Die Leinwandauflösung bestimmt die Anzahl der Pixel, die darin enthalten sind. Die Auflösung wird durch Festlegen der Eigenschaften für die Breite und Höhe des Canvas-Elements festgelegt. Wenn nicht angegeben, beträgt die Leinwand standardmäßig 300 x 150 Pixel.

Die folgende Leinwand verwendet die obige CSS-Größe. Da jedoch width und height nicht angegeben werden, beträgt die Auflösung 300 x 150.

<canvas id="my-canvas"></canvas>

Dies führt dazu, dass jedes Pixel ungleichmäßig gedehnt wird. Der Pixel-Aspekt ist 1: 2. Wenn die Leinwand gedehnt wird, verwendet der Browser eine bilineare Filterung. Dies hat den Effekt, dass gestreckte Pixel unscharf werden.

Stellen Sie für die besten Ergebnisse bei der Verwendung der Leinwand sicher, dass die Auflösung der Leinwand der Anzeigegröße entspricht.

Folgen Sie dem CSS-Stil oben, um die Anzeigegröße anzupassen, und fügen Sie die Leinwand mit width und height auf dieselbe Pixelanzahl wie der Stil definiert hinzu.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

Aus Leinwand Leinwand

Wenn Sie mit der Leinwand arbeiten, benötigen Sie oft eine Leinwand, um einige Pixeldaten aufzunehmen. Es ist einfach, eine Leinwand außerhalb des Bildschirms zu erstellen, um einen 2D-Kontext zu erhalten. Ein Offscreen-Canvas verwendet auch die verfügbare Grafikhardware zum Rendern.

Mit dem folgenden Code wird einfach eine Leinwand erstellt und mit blauen Pixeln gefüllt.

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

Oft wird die Leinwand außerhalb des Bildschirms für viele Aufgaben verwendet, und Sie haben möglicherweise viele Leinwände. Um die Verwendung der Leinwand zu vereinfachen, können Sie den Leinwandkontext an die Leinwand anhängen.

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

Ermitteln der Mausposition auf der Leinwand

In diesem Beispiel wird gezeigt, wie die Mausposition relativ zur Zeichenfläche (0,0) wird, sodass (0,0) die obere linke Ecke der HTML5-Zeichenfläche ist. e.clientX und e.clientY erhalten die e.clientY relativ zum oberen e.clientY des Dokuments. Um dies zu ändern, werden die left und right Positionen der Leinwand vom Client X und Y abgezogen.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

Lauffähiges Beispiel

Die Verwendung von Math.round soll sicherstellen, dass die x,y Positionen ganze Zahlen sind, da das Begrenzungsrechteck der Leinwand möglicherweise keine ganzzahligen Positionen hat.

Hallo Welt

HTML

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

Ergebnis

Ein Index für Html5-Canvas-Funktionen und -Verwendungen

Fähigkeiten der Leinwand

Mit Canvas können Sie programmgesteuert auf Ihre Webseite zeichnen:

Leinwandzeichnungen können umfangreich gestaltet werden:

Verwendung der Leinwand

Zeichnungen können kombiniert und an beliebiger Stelle auf der Leinwand positioniert werden.

Paint / Sketch-Anwendungen,
Schnelle interaktive Spiele,
Datenanalysen wie Diagramme, Grafiken,
Photoshop-ähnliche Bildgebung
Flash-ähnliche Werbung und auffällige Webinhalte.

Mit Canvas können Sie die Komponentenfarben Rot, Grün, Blau und Alpha der Bilder bearbeiten. Auf diese Weise kann die Leinwand Bilder mit ähnlichen Ergebnissen wie Photoshop bearbeiten.

Färben Sie einen beliebigen Teil eines Bildes auf Pixelebene neu ein (wenn Sie HSL verwenden, können Sie sogar ein Bild unter Beibehaltung der wichtigen Beleuchtung und Sättigung neu einfärben, sodass das Ergebnis nicht so aussieht, als hätte jemand Farbe auf das Bild geschlagen.)
"Knockout" den Hintergrund um eine Person / einen Gegenstand in einem Bild,
Erkennen und überfluten eines Teils eines Bildes (z. B. Ändern der Farbe eines von einem Benutzer angeklickten Blütenblatts von grün auf gelb - nur das angeklickte Blütenblatt!),
Perspektivisches Verziehen (z. B. Umwickeln eines Bildes um die Biegung einer Tasse),
Ein Bild auf Inhalt prüfen (z. B. Gesichtserkennung),
Beantworten Sie Fragen zu einem Bild: Befindet sich auf diesem Bild meines Parkplatzes ein Auto ?,
Anwenden von Standard-Bildfiltern (Graustufen, Sepia usw.)
Anwenden eines exotischen Bildfilters, den Sie sich vorstellen können (Sobel Edge Detection),
Bilder kombinieren. Wenn die liebe Oma Sue es nicht zur Familienzusammenführung schaffen konnte, "photoshop" sie einfach in das Wiedervereinigungsbild. Ich mag Cousin Phil nicht - nur "photoshop ihn aus,
Abspielen eines Videos / Erfassen eines Frames von einem Video
Exportieren Sie den Canvas-Inhalt als .jpg | .png image (Sie können das Bild optional sogar beschneiden oder mit Anmerkungen versehen und das Ergebnis als neues Bild exportieren),

Verschieben und Bearbeiten von Leinwandzeichnungen (z. B. zum Erstellen eines Action-Spiels):

Nachdem etwas auf der Leinwand gezeichnet wurde, kann die vorhandene Zeichnung nicht verschoben oder bearbeitet werden. Dieses weit verbreitete Missverständnis, dass Leinwandzeichnungen beweglich sind, ist zu klären: Vorhandene Leinwandzeichnungen können nicht bearbeitet oder verschoben werden!
Canvas zeichnet sehr, sehr schnell. Canvas kann Hunderte von Bildern, Texten, Linien und Kurven im Bruchteil einer Sekunde zeichnen. Wenn verfügbar, wird die GPU verwendet, um das Zeichnen zu beschleunigen.
Canvas erzeugt die Illusion von Bewegung, indem schnell und wiederholt etwas gezeichnet und dann an einer neuen Position neu gezeichnet wird. Wie das Fernsehen verleiht dieses ständige Nachzeichnen dem Auge die Illusion von Bewegung.

Drehen

Das rotate(r) Verfahren des 2D - Kontextes dreht die Leinwand durch den angegebenen Betrag r von Radianten um den Ursprung.

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

Live-Demo auf JSfiddle

Speichern Sie die Leinwand in einer Bilddatei

Sie können eine Leinwand in einer Bilddatei speichern, indem Sie die Methode canvas.toDataURL() , die den Daten-URI für die Bilddaten der Leinwand zurückgibt.

Die Methode kann zwei optionale Parameter canvas.toDataURL(type, encoderOptions) : type ist das Bildformat (wenn weggelassen, lautet der Standardwert image/png ). encoderOptions ist eine Zahl zwischen 0 und 1, die die Bildqualität angibt (Standardeinstellung ist 0,92).

Hier zeichnen wir eine Leinwand und hängen den Daten-URI der Leinwand an den Link "Download to myImage.jpg" an.

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

Live-Demo auf JSfiddle.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow