aplicações HTML5 Canvas comunicar com o navegador host para retornos de chamada de animação, a reprodução de áudio / vídeo, e lidar com eventos do usuário. Isso proporciona um canal de duas vias entre o código javascript eo navegador. código javascript pode ser dado conhecimento das atividades do navegador e instruir o navegador em ações a serem tomadas.
Menu
setInterval (callbackFunction, intervalInMilliseconds)
Comentário: Retorna um ID
setTimeout (callbackFunction, intervalInMilliseconds) window.requestAnimationFrame
Comentário: versões específicas do navegador incluem
webkitRequestAnimationFrame, mozRequestAnimationFrame, oRequestAnimationFrame, msRequestAnimationFrame
Essas funções fazem referência a um elemento de áudio ou vídeo usando a notação de sintaxe de ponto. Aqui está um exemplo: audioElement.Toque().
canPlayType (fileMimeType)
Comentário: Returns "talvez", "provavelmente", ou ""
setAttribute pausa load () play () () ( "src", "Filesource")
document.onkeydown = function (event) {var chave = event.keyCode-. . .}Comentário: browser comum tipos de eventos janela incluem
onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onkeydown, onkeypress, onkeyup, onctrlKey, onaltKey, onshiftKeycanvas.addEventListener ( "tipo", função, false)
Comentário: lona comum tipos de eventos área incluem
clique, dblclick, foco, focusIn, focusOut, keydown, keypress, keyup, mousedown, mouseenter, mousemove, mouseover, mouseup, mousewheel, pausa, rolar, touchstart, touchmove, touchend, volumechange
Uma página web definidos pelo HTML pode ter várias áreas de lona. Cada tela tem um contexto associado. O ID definido na tag é usado no código javascript para identificar uma lona e seu contexto associado. Contextos são referenciados usando a notação de sintaxe de ponto. Aqui está um exemplo: contextName.save ().
getElementById ( "canvasName") getContext ( "2d") save () restore ()
Cada contexto HTML5 Canvas contém atributos que podem ser modificados pelo código javascript. Note que atributos são atribuídos à lona contextos, não objetos de lona individuais. Atributos para um contexto são referenciados usando a notação de sintaxe de ponto. Aqui está um exemplo: contextName.fillStyle ="vermelho". Os seguintes atributos mostrar padrão e outros valores opcionais:
fillStyle de fontes "black" "10px sans-serif" globalAlpha 1,0
Comentário: Os valores apresentados após atributos são padrões
globalCompositeOperation "source-over"
Comentário: Outras composições são
"Source-in", "fonte-out", "fonte de-cima", "destino-over", "destino-in", "destino-out", "destino-em cima", "leve", "cópia", "xor" lineCap "bunda"
Comentário: Outras tampas são "volta" e "quadrado".
lineJoin "mitra"
Comentário: Outro junta são "volta" e "bisel".
lineWidth 1.0miterLimit 10.0shadowColor "black transparent"
Comentário: Outras cores incluem grande variedade
shadowBlur 0.0shadowOffsetX 0.0shadowOffsetY 0.0strokeStyle "black"
Comentário: Outras cores incluem grande variedade
textAlign "start"
Comentário: Outros alinhamentos
"fim", "esquerda", "certo", "centro" TextBaseline "alfabética"
Comentário: Outras linhas de base são
"topo", "suspensão", "meio", "ideográfico", "inferior"
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 ().
arc (xPosition, posicaoy, raio, startAngle, endAngle, sentido anti-horário)
arcto (xBeginning, yBeginning, Xend, yEnd, raio)
rect (xPosition, posicaoy, largura, altura)
Comentário: Outras formas também pode ser usado para configurar uma área de recorte.
grampo()
moveTo (xStartPosition, yStartPosition)
bezierCurveTo (XControl1, yControl1, xControl2, yControl2, Xend, yEnd)
quadraticCurveTo (XControl, yControl, Xend, yEnd)
createLinearGradient (xPosition1, yPosition1, xPosition2, yPosition2)
createRadialGradient (xCircle1, yCircle1, radius1, xCircle2, yCircle2, radius2)
addColorStop (positionFromZeroToOne, cor)
drawImage (imagem, xPosition, posicaoy)
drawImage (imagem, xPosition, posicaoy, newWidth, newHeight)
drawImage (imagem, xCrop, yCrop, xPosition, posicaoy, newWidth, newHeight)
BeginPath ()
moveTo (xPosition, posicaoy)
lineTo (xPosition, posicaoy)
isPointInPath (xPosition, posicaoy)
Comentário: Retorna true se no caminho atual
acidente vascular encefálico()
closePath ()
createPattern (imagem, "repetir")
Comentário: Outros padrões são "No-repeat", "Repeat-x", "Repetir-y"
clearRect (xPosition, posicaoy, largura, altura)
fillRect (xPosition, posicaoy, largura, altura)
strokeRect (xPosition, posicaoy, largura, altura)
rect (xPosition, posicaoy, largura, altura)
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
rotate (angle)
escala (scaleHorizontal, scaleVertical)
translate (xTranslation, yTranslation)
setTransform (scaleX, skewY, skewX, scaleY, translateX, translateY)