HTML5 Canvas Rita funktioner
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)