Html5 funciones de dibujo lienzo

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 función. Referencia de funciones de un contexto usando la notación de sintaxis con punto. He aquí un ejemplo: contextName.beginPath ().

arcos

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

arcto (xBeginning, yBeginning, xFin, yEnd, radio)

Recorte

rect (xPosition, yPosition, anchura, altura)

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

acortar()

Curvas

moveTo (xStartPosition, yStartPosition)
bezierCurveTo (xControl1, yControl1, xControl2, yControl2, xFin, yEnd)
quadraticCurveTo (XControl, yControl, xFin, yEnd)

gradientes

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)

Las líneas y rutas

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

Comentario: Devuelve verdadero si en el camino actual

Video: Animación con Canvas

carrera()
closePath ()

Patrones

createPattern (imagen, &ldquo-repetición&rdquo-)

Comentario: Otros patrones son &ldquo-no-repetición&rdquo-, &ldquo-repeat-x&rdquo-, &ldquo-repetir-y&rdquo-

rectángulos

clearRect (xPosition, yPosition, anchura, altura)
fillRect (xPosition, yPosition, anchura, altura)
strokeRect (xPosition, yPosition, anchura, altura)
rect (xPosition, yPosition, anchura, altura)

Texto

fillText (cadena, xPosition, yPosition, anchoMax)

Comentario: anchura máxima es opcional.

Video: HTML5: Introducción a canvas- Dibujo, Texto, Fondo e Imagen

strokeText (cadena, xPosition, yPosition, anchoMax)

Comentario: anchura máxima es opcional.

Video: 02.- Curso HTML 5. Trabajar con la API Canvas

measureText (cadena)

Comentario: Devuelve un objeto que contiene el ancho en píxeles

Video: Dibujo vectorial con Canvas de HTML 5 y javascript

transformadas

rotate (ángulo)
escala (scaleHorizontal, scaleVertical)
translate (xTranslation, yTranslation)
setTransform (scaleX, skewY, skewX, scaleY, translateX, translateY)