Funciones HTML5 Lienzo de dibujo

January 26

Funciones de JavaScript se utilizan para manipular píxeles en áreas HTML5 Canvas basándose en la configuración de atributos y parámetros de la función. Referencia de funciones de un contexto usando la notación de sintaxis con punto. He aquí un ejemplo: contextName.beginPath ().

Arcs

arco (xPosition, yPosition, radio, startAngle, endAngle, en sentido antihorario)

ártico (xBeginning, yBeginning, Xend, yEnd, radio)

Recorte

rect (xPosition, yPosition, ancho, alto)

Comentario: Otras formas también se pueden utilizar para crear un área de recorte.

Clip ()

Curves

moveTo (xStartPosition, yStartPosition)

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

quadraticCurveTo (XControl, yControl, Xend, yEnd)

Degradados

createLinearGradient (xPosition1, yPosition1, xPosition2, yPosition2)

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

addColorStop (positionFromZeroToOne, color)

Imágenes

drawImage (imagen, xPosition, yPosition)

drawImage (imagen, xPosition, yPosition, newWidth, newHeight)

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

Líneas y rutas

beginPath ()

moveTo (xPosition, yPosition)

lineTo (xPosition, yPosition)

isPointInPath (xPosition, yPosition)

Comentario: Devuelve true si en camino actual

accidente cerebrovascular ()

closePath ()

Patrones

createPattern (imagen, "repetir")

Comentario: Otros patrones son "no-repeat", "repeat-x", "repeat-y"

Rectángulos

clearRect (xPosition, yPosition, ancho, alto)

fillRect (xPosition, yPosition, ancho, alto)

strokeRect (xPosition, yPosition, ancho, alto)

rect (xPosition, yPosition, ancho, alto)

Texto

fillText (cadena, xPosition, yPosition, anchoMax)

Comentario: anchoMax es opcional.

strokeText (cadena, xPosition, yPosition, anchoMax)

Comentario: anchoMax es opcional.

measureText (cadena)

Comentario: Devuelve un objeto que contiene la anchura en píxeles

Transformadas

rotación (ángulo)

escala (scaleHorizontal, scaleVertical)

traducir (xTranslation, yTranslation)

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