PaintRenderingContext2D

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die PaintRenderingContext2D-Schnittstelle der CSS Painting API ist der Rendering-Kontext der API, der für Zeichnung auf das Bitmap verwendet wird. Sie implementiert einen Teil der CanvasRenderingContext2D-API mit folgenden Ausnahmen:

Diese Schnittstelle ist nur im PaintWorkletGlobalScope verfügbar.

Instanz-Eigenschaften und Methoden

PaintRenderingContext2D implementiert einen Teil der CanvasRenderingContext2D-API, wobei alle Eigenschaften und Methoden dieselbe Verwendung wie in CanvasRenderingContext2D haben.

Kontext

CanvasRenderingContext2D.isContextLost()

Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Zustand

CanvasRenderingContext2D.save()

Sichert den aktuellen Zustand des Zeichenstils in einem Stapel, sodass Änderungen mit restore() rückgängig gemacht werden können.

CanvasRenderingContext2D.restore()

Stellt den Zeichenstil-Zustand zum letzten im 'Stapel gespeicherten' Element wieder her.

CanvasRenderingContext2D.reset()

Setzt den aktuellen Zeichenstil-Zustand auf die Standardwerte zurück.

Transformationen

CanvasRenderingContext2D.getTransform()

Ruft die aktuell auf den Kontext angewendete Transformationsmatrix als DOMMatrix ab.

CanvasRenderingContext2D.rotate()

Fügt eine Rotation zur Transformationsmatrix hinzu. Das Winkelargument stellt einen im Uhrzeigersinn gemessenen Winkel in Radianten dar.

CanvasRenderingContext2D.scale()

Fügt der Canvas-Einheit eine Skalierungstransformation hinzu: horizontal um x und vertikal um y.

CanvasRenderingContext2D.translate()

Fügt eine Translations-Transformation hinzu, indem die Canvas und ihr Ursprung horizontal um x und vertikal um y im Raster verschoben werden.

CanvasRenderingContext2D.transform()

Multipliziert die aktuelle Transformationsmatrix mit der durch ihre Argumente beschriebenen Matrix.

CanvasRenderingContext2D.setTransform()

Setzt die aktuelle Transformation auf die Identitätsmatrix zurück und ruft dann die Methode transform() mit denselben Argumenten auf.

CanvasRenderingContext2D.resetTransform()

Setzt die aktuelle Transformation auf die Identitätsmatrix zurück.

Komposition

CanvasRenderingContext2D.globalAlpha

Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf die Canvas zusammengesetzt werden.

CanvasRenderingContext2D.globalCompositeOperation

Gemeinsam mit globalAlpha legt dies fest, wie Formen und Bilder auf das bestehende Bitmap gezeichnet werden.

Bildglättung

CanvasRenderingContext2D.imageSmoothingEnabled

Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.

CanvasRenderingContext2D.imageSmoothingQuality

Ermöglicht das Festlegen der Qualität der Bildglättung.

Füll- und Linienstile

CanvasRenderingContext2D.fillStyle

Farbe oder Stil für das Innere von Formen.

CanvasRenderingContext2D.strokeStyle

Farbe oder Stil für die Linien um Formen.

Farbverläufe und Muster

CanvasRenderingContext2D.createConicGradient()

Erstellt einen kegelförmigen Farbverlauf um einen durch die Parameter definierten Punkt.

CanvasRenderingContext2D.createLinearGradient()

Erstellt einen linearen Farbverlauf entlang der Linie, die durch die Parameterkoordinaten angegeben ist.

CanvasRenderingContext2D.createRadialGradient()

Erstellt einen radialen Farbverlauf auf Grundlage der Koordinaten von zwei durch die Parameter definierten Kreisen.

CanvasRenderingContext2D.createPattern()

Erstellt ein CanvasPattern-Muster des angegebenen Bildes, das in den durch das Wiederholungsargument angegebenen Richtungen wiederholt wird.

Schatten

CanvasRenderingContext2D.shadowBlur

Gibt die Menge des Weichzeichnens als Zahl an.

CanvasRenderingContext2D.shadowColor

Gibt die Farbe des Schattens als CSS-<color> an.

CanvasRenderingContext2D.shadowOffsetX

Gibt die horizontale Entfernung an, um die der Schatten verschoben wird, als Zahl.

CanvasRenderingContext2D.shadowOffsetY

Gibt die vertikale Entfernung an, um die der Schatten verschoben wird, als Zahl.

Rechtecke zeichnen

CanvasRenderingContext2D.clearRect()

Löscht die Pixel im angegebenen Rechteck und setzt sie auf transparentes Schwarz.

CanvasRenderingContext2D.fillRect()

Mal die Pixel des angegebenen Rechtecks und füllt es mit dem aktuellen Füllstil.

CanvasRenderingContext2D.strokeRect()

Malt den Rand des angegebenen Rechtecks mit dem aktuellen Linienstil.

Pfade zeichnen

CanvasRenderingContext2D.beginPath()

Beginnt einen neuen Pfad und leert die Liste der Unterpfade. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.

CanvasRenderingContext2D.fill()

Füllt die Unterpfade des aktuellen Pfades mit dem aktuellen Füllstil.

CanvasRenderingContext2D.stroke()

Zeichnet die Umrisse der Unterpfade des aktuellen Pfades mit dem aktuellen Linienstil.

CanvasRenderingContext2D.clip()

Wandelt den aktuellen oder angegebenen Pfad in die aktuelle Ausschnittregion um. Verwenden Sie die angegebene Füllregel, um zu bestimmen, welche Punkte im Pfad liegen. Nachfolgende Pfadänderungen werden nur innerhalb des Ausschnittspfades angezeigt.

CanvasRenderingContext2D.isPointInPath()

Ein boolescher Wert, der true ist, wenn der angegebene Punkt im aktuellen oder angegebenen Pfad enthalten ist.

CanvasRenderingContext2D.isPointInStroke()

Ein boolescher Wert, der true ist, wenn der Punkt innerhalb der vom Gestalten eines Pfades eingeschlossenen Fläche liegt.

Bilder zeichnen

CanvasRenderingContext2D.drawImage()

Zeichnet das angegebene Bild oder einen spezifischen Bereich davon, optional in einer bestimmten Größe und Position.

Linienstile

CanvasRenderingContext2D.lineWidth

Eine Zahl, die die Breite der Linie in Koordinatenraumeinheiten angibt.

CanvasRenderingContext2D.lineCap

Der Typ der Abschlüsse am Ende von Linien. Mögliche Werte: butt (Standard), round, square.

CanvasRenderingContext2D.lineJoin

Definiert den Typ der Ecken, an denen sich zwei Linien treffen. Mögliche Werte: round, bevel, miter (Standard).

CanvasRenderingContext2D.miterLimit

Eine Zahl, die das Miter-Begrenzungsverhältnis in Koordinatenraumeinheiten angibt.

CanvasRenderingContext2D.getLineDash()

Gibt das aktuelle Linien-Strichmuster als Array von Zahlen zurück, das die Längen der alternativen Linien und Lücken in Koordinatenraumeinheiten angibt.

CanvasRenderingContext2D.setLineDash()

Legt die Liste von Linien- und Strichabständen als aktuelles Linien-Strichmuster fest (wie beim Stempeln verwendet).

CanvasRenderingContext2D.lineDashOffset

Gibt an, wo ein Strichmuster auf einer Linie beginnen soll.

Pfade

CanvasRenderingContext2D.closePath()

Markiert den aktuellen Unterpfad als geschlossen, indem eine gerade Linie vom aktuellen Punkt zum Anfang gezeichnet wird, und beginnt einen neuen Unterpfad mit einem Punkt, der mit dem Anfangs- und Endpunkt des neu geschlossenen Unterpfades identisch ist. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, tut diese Funktion nichts.

CanvasRenderingContext2D.moveTo()

Verschiebt den Startpunkt eines neuen Unterpfades zu den Koordinaten (x, y).

CanvasRenderingContext2D.lineTo()

Verbindet den letzten Punkt im aktuellen Unterpfad mit einer geraden Linie zu den angegebenen Koordinaten (x, y).

CanvasRenderingContext2D.bezierCurveTo()

Fügt eine kubische Bézierkurve zum aktuellen Pfad hinzu.

CanvasRenderingContext2D.quadraticCurveTo()

Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.

CanvasRenderingContext2D.arc()

Fügt einen kreisförmigen Bogen zum aktuellen Pfad hinzu.

CanvasRenderingContext2D.arcTo()

Fügt einen Bogen mit den gegebenen Kontrollpunkten und dem Radius zum aktuellen Pfad hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden ist.

CanvasRenderingContext2D.ellipse()

Fügt einen elliptischen Bogen zum aktuellen Pfad hinzu.

CanvasRenderingContext2D.rect()

Erstellt einen Pfad für ein Rechteck an der Position (x, y) mit einer durch width und height bestimmten Größe.

CanvasRenderingContext2D.roundRect()

Erstellt einen Pfad für ein Rechteck mit abgerundeten Ecken an der Position (x, y) mit einer durch width und height bestimmten Größe sowie durch radii festgelegten Radien.

Filter

CanvasRenderingContext2D.filter Nicht standardisiert

Wendet einen CSS- oder SVG-Filter auf die Canvas an, zum Beispiel, um ihre Helligkeit oder Unschärfe zu ändern.

Beispiele

Vollständige Beispiele finden Sie unter CSS Painting API.

Spezifikationen

Specification
CSS Painting API Level 1
# 2d-rendering-context

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PaintRenderingContext2D
beginPath
clearRect
clip
createLinearGradient
createPattern
createRadialGradient
drawImage
fill
fillRect
fillStyle
filter
Non-standard
getLineDash
getTransform
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
isPointInPath
isPointInStroke
lineCap
lineDashOffset
lineJoin
lineWidth
miterLimit
resetTransform
restore
rotate
save
scale
setLineDash
setTransform
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
stroke
strokeRect
strokeStyle
transform
translate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.

Siehe auch