HTML5 Canvas Rita funktioner

November 24

JavaScript-funktioner används för att manipulera pixlar på HTML5 Canvas områden baserade på attributinställningar och funktionsparametrar. Funktioner referera ett sammanhang använder punktsyntax notation. Här är ett exempel: contextName.beginPath ().

Bågar

båge (xPosition, yPosition, radie, startAngle, endAngle, moturs)

arcTo (xBeginning, yBeginning, xEnd, yEnd, radie)

Clipping

rekt (xPosition, yPosition, bredd, höjd)

Kommentar: Andra former kan också användas för att inrätta en urklippsområde.

klämma ()

Kurvor

moveTo (xStartPosition, yStartPosition)

bezierCurveTo (xControl1, yControl1, xControl2, yControl2, xEnd, yEnd)

quadraticCurveTo (XControl, yControl, xEnd, yEnd)

Gradienter

createLinearGradient (xPosition1, yPosition1, xPosition2, yPosition2)

createRadialGradient (xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)

addColorStop (positionFromZeroToOne, färg)

Bilder

drawimage (bild, xPosition, yPosition)

drawimage (bild, xPosition, yPosition, newWidth, newHeight)

drawimage (bild, xCrop, yCrop, xPosition, yPosition, newWidth, newHeight)

Linjer och sökvägar

beginPath ()

moveTo (xPosition, yPosition)

lineTo (xPosition, yPosition)

isPointInPath (xPosition, yPosition)

Kommentar: Returnerar true om i aktuella sökvägen

stroke ()

closePath ()

Mönster

createPattern (image, "repeat")

Kommentar: Andra mönster är "no-repeat", "repeat-x", "repeat-y"

Rektanglar

clearRect (xPosition, yPosition, bredd, höjd)

fillRect (xPosition, yPosition, bredd, höjd)

strokeRect (xPosition, yPosition, bredd, höjd)

rekt (xPosition, yPosition, bredd, höjd)

Text

fillText (sträng, xPosition, yPosition, maxWidth)

Kommentar: maxWidth är valfri.

strokeText (sträng, xPosition, yPosition, maxWidth)

Kommentar: maxWidth är valfri.

measureText (sträng)

Kommentar: Returnerar ett objekt som innehåller bredden i pixlar

Transformer

rotate (vinkel)

skala (scaleHorizontal, scaleVertical)

översätta (xTranslation, yTranslation)

setTransform (scaleX, skewY, skewX, scaleY, translateX, translateY)