From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/canvas/index.html | 56 +++ .../canvasrenderingcontext2d/fillrect/index.html | 177 +++++++++ .../getimagedata/index.html | 142 +++++++ .../de/web/api/canvasrenderingcontext2d/index.html | 432 +++++++++++++++++++++ .../ispointinpath/index.html | 206 ++++++++++ .../api/canvasrenderingcontext2d/scale/index.html | 223 +++++++++++ .../setlinedash/index.html | 179 +++++++++ .../canvasrenderingcontext2d/textalign/index.html | 128 ++++++ 8 files changed, 1543 insertions(+) create mode 100644 files/de/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/textalign/index.html (limited to 'files/de/web/api/canvasrenderingcontext2d') diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..47b01c8f72 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,56 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.canvas Eigenschaft, Teil der Canvas API, ist eine Nurlese-Referenz auf das {{domxref("HTMLCanvasElement")}} Objekt, das mit einem gegebenen Kontext assoziiert ist. Sie kann {{jsxref("null")}} sein, wenn kein assoziiertes {{HTMLElement("canvas")}} Element existiert.

+ +

Syntax

+ +
ctx.canvas;
+ +

Beispiele

+ +

Wenn dieses {{HTMLElement("canvas")}} Element gegeben ist:

+ +
<canvas id="canvas"></canvas>
+
+ +

... kannst du eine Referenz auf das Canvas-Element innerhalb von CanvasRenderingContext2D herstellen, indem du die canvas Eigenschaft verwendest.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.canvas // HTMLCanvasElement
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}}
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..178a861f4e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Methode(2) + - Reference + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.fillRect() der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position (x, y). Die Größe wird über die Parameter width und height bestimmt. Die Füllfarbe wird über das Attribut fillStyle des Context-Objekts festgelegt.

+ +

Syntax

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Parameter

+ +
+
x
+
Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.
+
y
+
Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.
+
width
+
Die Breite des Rechtecks.
+
height
+
Die Höhe des Rechtecks.
+
+ +

Beispiele

+ +

Benutzung der Methode fillRect

+ +

Dies ist ein einfaches Code-Beispiel, welches die fillRect Methode nutzt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// fill the whole canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..c8b6bdf2be --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.getImageData() Methode der Canvas 2D API gibt ein Objekt des Types  {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten (sx,sy)  und den Dimensionen sw  in der Breite und sy  in der Höhe. 

+ +

Syntax

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Parameters

+ +
+
sx
+
Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.
+
sy
+
Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.
+
sw
+
Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.
+
sh
+
Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. 
+
+ +

Rückgabewerte

+ +

Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.

+ +

Fehlertypen

+ +
+
IndexSizeError
+
Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.
+
+ +

Beispiele

+ +

Benutzung der getImageData Funktion

+ +

Das ist ein einfaches Code-Beispiel zur Benutzung der getImageData Funktion. Für mehr Informationen siehe Pixel manipulation with canvas und die Referenz zum {{domxref("ImageData")}} Objekt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Ab {{GeckoRelease("5.0")}} unterstützt getImageData() die Angabe von Rechtecken, die die Ränder des Canvas-Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.

+ +

Sehen Sie auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/index.html b/files/de/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..aa9c1ea07a --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,432 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Graphics + - Image + - Shape +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

Das CanvasRenderingContext2D-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines {{ HTMLElement("canvas") }} zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.

+ +

Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das Canvas-Tutorial bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.

+ +

Ein einfaches Beispiel

+ +

Um eine CanvasRenderingContext2D Instanz zu erhalten, muss man erst ein  HTML <canvas> Element haben, mit dem man arbeiten kann:

+ +
<canvas id="my-house" width="300" height="300"></canvas>
+ +

Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} eines <canvas>, mit "2d" als Argument:

+ +
const canvas = document.getElementById('my-house');
+const ctx = canvas.getContext('2d');
+
+ +

Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:

+ +
// Die Lininestärke festlegen
+ctx.lineWidth = 10;
+
+// Wand
+ctx.strokeRect(75, 140, 150, 110);
+
+// Tür
+ctx.fillRect(130, 190, 40, 60);
+
+// Dach
+ctx.moveTo(50, 140);
+ctx.lineTo(150, 60);
+ctx.lineTo(250, 140);
+ctx.closePath();
+ctx.stroke();
+
+ +

Die enstandene Zeichnung sieht so aus:

+ +

{{EmbedLiveSample("Basic_example", 700, 330)}}

+ +

Referenz

+ +

Rechtecke zeichnen

+ +

Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Setzt alle Pixel im Rechteck mit Startpunkt (x, y) und Größe (width, height) auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Zeichnet ein gefülltes Rechteck mit Startpunkt (x, y) und Größe (width, height).
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Zeichnet ein Rechteck mit Startpunkt (x, y) und Größe (width, height), verwendet dabei den aktuellem stroke style.
+
+ +

Text darstellen

+ +

Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das {{domxref("TextMetrics")}} - Objekt für die Texteigenschaften.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position (x, y).
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position (x, y).
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Gibt ein {{domxref("TextMetrics")}}-Objekt zurück.
+
+ +

Linienstile

+ +

Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Linienbreite. Standard: 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Typ des Linienabschlusses. Mögliche Werte: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Verbindungsecken-Größe. Standard: 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.
+
+ +

Textstile

+ +

Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font-Einstellung. Standard: 10px sans-serif
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Ausrichtungs-Einstellung. Mögliche Werte: start (default), end, left, right oder center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Ausrichtungseinstellung zur Basislinie. Mögliche Werte: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Direktionalität. Mögliche Werte: ltr, rtl, inherit (default).
+
+ +

Füll- und Linienfarbe

+ +

Die Füllfarbe (fillStyle) wird innerhalb von Formen angewendet, die Linienfarbe (strokeStyle) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Farbe oder Stil für innerhalb von Formen. Standardwert #000 (schwarz).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Farbe oder Stil für die Randlinie von Formen. Standardwert #000 (schwarz).
+
+ +

Farbverläufe und Muster

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Erzeugt ein Muster aus dem angegebenen Bild (ein {{domxref("CanvasImageSource")}}). Es wiederholt das Bild in den Richtungen, die mit dem repetition Parameter definiert werden. Diese Methode gibt ein {{domxref("CanvasPattern")}} zurück.
+
+ +

Schatten

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Definiert den Unschärfe-Effekt. Standardwert 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Farbe des Schattens. Standardwert: komplett transparentes Schwarz.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontale Entfernung des Schattens. Standardwert 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertikale Entfernung des Schattens. Standardwert 0.
+
+ +

Pfade

+ +

Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen (x, y) Koordinaten.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Verbindet den letzten Punkt im Unterpfad mit den übergebenen (x, y) Koordinaten in einer geraden Linie.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit moveTo() geändert werden.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt (x, y) und Radius r. Der Startwinkel ist startAngle, der Endwinkel endAngle, Richtung gegen den Uhrzeigersinn.
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum (x, y) und den Radien radiusX und radiusY, beginnend bei startAngle und endend bei endAngle, Richtung gegen den Uhrzeigersinn.
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Erzeugt einen Pfad mit einem Rechteck an der Position (x, y) und den Dimensionen width und height.
+
+ +

Pfade zeichnen

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach clip() gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe  Clipping paths im Canvas Tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.
+
+ +

Transformationen

+ +

Objekte im CanvasRenderingContext2D-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder {{domxref("Path2D")}} Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens {{domxref("SVGMatrix")}} Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}
+
Die momentane Transformationsmatrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Fügt eine Drehung zur Transformationsmatrix hinzu. Der angle-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor x, vertikal um Faktor y). Was nach scale() auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um x, vertikal um y). Was nach translate() gezeichnet wird, ist also um (x, y) verschoben.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Setzt die aktuellen Transformationen zurück und ruft dann die transform() Methode mit den selben Parametern auf.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Setzt die aktuellen Transformationen zurück.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert 1.0 (undurchsichtig).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
Zusammen mit globalAlpha legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.
+
+ +

Bilder zeichnen

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.
+
+ +

Pixelmanipulation

+ +

Siehe auch das {{domxref("ImageData")}} Objekt.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Erzeugt ein neues, leeres {{domxref("ImageData")}} Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Gibt ein {{domxref("ImageData")}} Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei (sx, sy), mit Breite sw und Höhe sh.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Malt Pixeldaten des {{domxref("ImageData")}} Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.
+
+ +

Bildglättung

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.
+
+ +

Der Leinwand-Zustand

+ +

Der CanvasRenderingContext2D-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Trefferregionen

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Fügt eine Trefferregion (hit region) zur Leinwand hinzu.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Entfernt eine Trefferregion mit gegebener id von der Leinwand.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Entfernt alle Trefferregionen von der Leinwand.
+
+ +

Filter

+ +
+
{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.
+
+ +

Unstandardisierte APIs

+ + + +

Die meisten dieser APIs sind veraltet und wurden kurz nach Chrome 36 entfernt.

+ +
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.clearShadow()
+
Entfernt alle Schatteneinstellungen wie  {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
Das ist redundant zum equivalenten Überladung von  drawImage.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setAlpha()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.globalAlpha")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineWidth()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineWidth")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineJoin()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineJoin")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineCap()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineCap")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.miterLimit")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.strokeStyle")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setFillColor()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.fillStyle")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setShadow()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDash
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.getLineDash()")}} und {{domxref("CanvasRenderingContext2D.setLineDash()")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineDashOffset")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} anstelle dieser Methode.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.CanvasRenderingContext2D")}}

+
+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..5eac7321fe --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,206 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.isPointInPath() der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.

+ +

Syntax

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, fillRule);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, fillRule);
+
+ +

Parameter

+ +
+
x
+
Die X-Koordinate des zu prüfenden Punktes.
+
y
+
Die Y-Koordinate des zu prüfenden Punktes.
+
fillRule
+
Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.
+ Mögliche Werte: + +
+
path
+
Ein {{domxref("Path2D")}} Objekt.
+
+ +

Rückgabewert

+ +
+
{{jsxref("Boolean")}}
+
Ein Boolean, welcher true ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten false.
+
+ +

Beispiele

+ +

Benutzung der Methode isPointInPath

+ +

Dies ist ein einfaches Snippet, welches die isPointinPath Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+
+ +

Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die console ausgegeben:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Compatibility notes

+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..b26824a51e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,223 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.scale() der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.

+ +

Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.

+ +

Syntax

+ +
void ctx.scale(x, y);
+
+ +

Parameter

+ +
+
x
+
Skalierungsfaktor in horizontaler Richtung.
+
y
+
Skalierungsfaktor in vertikaler Richtung
+
+ +

Beispiele

+ +

Die Methode scale verwenden

+ +

Dies ist nur ein kurzes Beispiel, das die Methode scale benutzt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

scale verwenden, um horizontal oder vertikal zu spiegeln

+ +

Sie können ctx.scale(-1, 1) benutzen, um den Inhalt horizontal zu spiegeln und ctx.scale(1, -1), um ihn vertikal zu spiegeln.

+ +
+
Playable code2
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code2', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompabilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..a7d5bd82c3 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +
{{APIRef}}
+ +

The CanvasRenderingContext2D.setLineDash() method of the Canvas 2D API sets the line dash pattern.

+ +

Syntax

+ +
void ctx.setLineDash(segments);
+
+ +

Parameters

+ +
+
segments
+
An {{jsxref("Array")}}. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. An empty array clears the dashes, so that a solid line will be drawn.
+
+ +

Examples

+ +

Using the setLineDash method

+ +

This is just a simple code snippet which uses the setLineDash method to draw a dashed line.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.setLineDash([5, 15]);
+
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();
+
+ +

Edit the code below and see your changes update live in the canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.setLineDash([5, 15]);
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{ CompatGeckoDesktop(27) }}{{ CompatIE(11) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile(27) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko-specific notes

+ + + +

WebKit-specific notes

+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..1f1651f456 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.textAlign Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.

+ +

Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} Methode basiert. Wenn textAlign  "center" ist,  dann würde der Text an der Stelle x - (width / 2) gezeichnet werden.

+ +

Syntax

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Optionen

+ +

Mögliche Werte:

+ +
+
left
+
Der Text wird linksbündig ausgerichtet.
+
right
+
Der Text wird rechtsbündig ausgerichtet.
+
center
+
Der Text wird zentiert ausgerichtet.
+
start
+
Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).
+
end
+
Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).
+
+ +

Der Standardwert ist start.

+ +

Beispiele

+ +

Benutzung der textAlign Eigenschaft

+ +

Ein einfaches Beispiel welches die textAlign Eigenschaft benutzt um die Textausrichtung zu ändern.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf