HTML5 Canvas-Zeichenfunktionen

javascript-Funktionen verwendet werden, Pixel auf HTML5 Canvas Bereiche auf Attributeinstellungen und Funktionsparameter basiert zu manipulieren. Funktionen verweisen auf ein Kontext Punkt-Syntax Notation. Hier ein Beispiel: contextName.beginPath ()

Menu

.

Arcs

Bogen (xPosition, yPosition, Radius, startangle, endAngle, gegen den Uhrzeigersinn)

ARCTO (xBeginning, yBeginning, xEnd, yEnd, Radius)

Ausschnitt

rect (xPosition, yPosition, Breite, Höhe)

Kommentar: Andere Formen können auch verwendet werden, um einen Schnittbereich einzurichten.

Clip ()

Curves

moveTo (xStartPosition, yStartPosition)
bezierCurveTo (xControl1, yControl1, xControl2, yControl2, xEnd, yEnd)
quadraticCurveTo (xControl, yControl, xEnd, yEnd)

Gradients

createLinearGradient (xPosition1, yPosition1, xPosition2, yPosition2)
createRadialGradient (xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)
addColorStop (positionFromZeroToOne, Farbe)

Bilder

drawImage (Bild, xPosition, yPosition)
drawImage (Bild, xPosition, yPosition, newWidth, newHeight)
drawImage (Bild, xCrop, yCrop, xPosition, yPosition, newWidth, newHeight)

Linien und Pfade

beginPath ()
moveTo (xPosition, yPosition)
lineTo (xPosition, yPosition)
isPointInPath (xPosition, yPosition)

Kommentar: Gibt true zurück, wenn der Strompfad

Schlaganfall()
closePath ()

Patterns

create (Bild, "repeat")

Kommentar: Andere Muster sind "No-repeat", "Repeat-x", "Repeat-y"

Rectangles

clearRect (xPosition, yPosition, Breite, Höhe)
fillRect (xPosition, yPosition, Breite, Höhe)
strokeRect (xPosition, yPosition, Breite, Höhe)
rect (xPosition, yPosition, Breite, Höhe)

Text

fillText (string, xPosition, yPosition, maxWidth)

Kommentar: maximale Breite ist optional.

strokeText (string, xPosition, yPosition, maxWidth)

Kommentar: maximale Breite ist optional.

measureText (string)

Kommentar: Gibt ein Objekt zurück, das die Breite in Pixel enthält

Wandelt

drehen (Winkel)
Skala (scaleHorizontal, scaleVertical)
übersetzen (xTranslation, yTranslation)
setTransform (scaleX skewY, skewX, scaleY, translateX, translateY)

Ähnliche

Menü