Funções HTML5 Canvas Drawing

funções de javascript são usados ​​para manipular pixels em áreas HTML5 Canvas com base nas definições de atributos e parâmetros de função. Funções referência a um contexto usando a notação de sintaxe de ponto. Aqui está um exemplo: contextName.beginPath ()

.

Arcs

arc (xPosition, posicaoy, raio, startAngle, endAngle, sentido anti-horário)

arcto (xBeginning, yBeginning, Xend, yEnd, raio)

tosquia

rect (xPosition, posicaoy, largura, altura)

Comentário: Outras formas também pode ser usado para configurar uma área de recorte.

grampo()

curvas

moveTo (xStartPosition, yStartPosition)
bezierCurveTo (XControl1, yControl1, xControl2, yControl2, Xend, yEnd)
quadraticCurveTo (XControl, yControl, Xend, yEnd)

gradientes

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

imagens

drawImage (imagem, xPosition, posicaoy)
drawImage (imagem, xPosition, posicaoy, newWidth, newHeight)
drawImage (imagem, xCrop, yCrop, xPosition, posicaoy, newWidth, newHeight)

Linhas e Caminhos

BeginPath ()
moveTo (xPosition, posicaoy)
lineTo (xPosition, posicaoy)
isPointInPath (xPosition, posicaoy)

Comentário: Retorna true se no caminho atual

acidente vascular encefálico()
closePath ()

Patterns

createPattern (imagem, "repetir")

Comentário: Outros padrões são "No-repeat", "Repeat-x", "Repetir-y"

retângulos

clearRect (xPosition, posicaoy, largura, altura)
fillRect (xPosition, posicaoy, largura, altura)
strokeRect (xPosition, posicaoy, largura, altura)
rect (xPosition, posicaoy, largura, altura)

Texto

fillText (string, xPosition, posicaoy, maxWidth)

Comente: largura máxima é opcional.

strokeText (string, xPosition, posicaoy, maxWidth)

Comente: largura máxima é opcional.

measureText (string)

Comentário: Retorna um objeto que contém a largura em pixels

transforma

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

Semelhante

menu