HTML5 Canvas-Anwendungen kommunizieren mit dem Host-Browser für die Animation Rückrufe, die Wiedergabe von Audio / Video- und Benutzerereignisse Handhabung. Dies liefert eine Zweiwegekanal zwischen javascript-Code und dem Browser. javascript-Code kann bewusst Browser-Aktivitäten gemacht werden und den Browser auf Maßnahmen zu ergreifen, unterweisen.
Menu
setInterval (callback, intervalInMilliseconds)
Kommentar: Gibt eine ID
setTimeout (callback, intervalInMilliseconds) window.requestAnimationFrame
Kommentar: Browser-spezifischen Versionen enthalten
webkitRequestAnimationFrame, mozRequestAnimationFrame, oRequestAnimationFrame, msRequestAnimationFrame
Diese Funktionen verweisen auf ein Audio- oder Video-Element mit Punkt-Syntax Notation. Hier ist ein Beispiel: audioElement.spielen().
canPlayType (fileMimeType)
Kommentar: Returns "könnte sein", "wahrscheinlich", oder ""
load () play () pause () setAttribute ( "src", "filesource")
document.onkeydown = function (event) {var key = event.keyCode-. . .}Kommentar: Gemeinsame Browserfenster Ereignistypen umfassen
onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onkeydown, onkeypress, onkeyup, onctrlKey, onaltKey, onshiftKeycanvas.addEventListener ( "Typ", Funktion, false)
Kommentar: Gemeinsame Canvas-Bereich Ereignistypen umfassen
Klick, dblclick, Fokus, focusin, focusout, keydown, keypress, keyup, mousedown-, MouseEnter-, mousemove-, Mouseover, mouseup, Mausrad, Pause, rolle, touchstart, Touchmove, touchend, volume
Ein HTML-definierte Web-Seite können mehrere Canvas Bereiche haben. Jeder Leinwand hat einen zugeordneten Kontext. Die ID im Tag definiert ist in javascript-Code verwendet, um eine Leinwand und der damit verbundenen Kontext zu identifizieren. Contexts verwenden Punkt-Syntax Notation referenziert. Hier ist ein Beispiel: contextName.save ().
getElementById ( "canvasName") getContext ( "2D") speichern () wiederherstellen ()
Jeder HTML5 Canvas Kontext enthält Attribute, die von javascript-Code kann geändert werden. Beachten Sie, dass Attribute zugeordnet sind Kontexte Leinwand, nicht einzelne Canvas-Objekte. Attribute für einen Kontext verwenden Punkt-Syntax Notation referenziert. Hier ist ein Beispiel: contextName.fillStyle ="rot". Die folgenden Attribute zeigen Ausfall- und andere optionale Werte:
fillStyle "black" font "10px sans-serif" globalAlpha 1.0
Kommentar: Werte nach Attributen dargestellt sind Standardwerte
global "source-over"
Kommentar: Andere Zusammensetzungen sind
"Source-in", "Quelle-out", "source-Spitze", "Ziel-over", "Ziel-in", "Ziel-out", "Ziel-Spitze", "leichter", "Kopieren", "xor" linecap "butt"
Kommentar: Andere Kappen sind "runden" und "Platz".
linejoin "Mitra"
Kommentar: Andere Joins "runden" und "Fase".
linewidth 1.0miterLimit 10.0shadowColor "transparent black"
Kommentar: Andere Farben sind große Vielfalt
shadowBlur 0.0shadowOffsetX 0.0shadowOffsetY 0.0strokeStyle "schwarz"
Kommentar: Andere Farben sind große Vielfalt
align "Start"
Kommentar: Andere Ausrichtungen sind
"Ende", "links", "Recht", "Center" Textbaseline "alphabetisch"
Kommentar: Andere Basislinien sind
"oben", "hängend", "Mitte", "ideographic", "Boden"
javascript-Funktionen verwendet werden, Pixel auf HTML5 Canvas Bereiche auf Attributeinstellungen und Funktionsparameter basiert zu manipulieren. Funktionen verweisen auf ein Kontext Punkt-Syntax Notation. Hier ein Beispiel: contextName.beginPath ().
Bogen (xPosition, yPosition, Radius, startangle, endAngle, gegen den Uhrzeigersinn)
ARCTO (xBeginning, yBeginning, xEnd, yEnd, Radius)
rect (xPosition, yPosition, Breite, Höhe)
Kommentar: Andere Formen können auch verwendet werden, um einen Schnittbereich einzurichten.
Clip ()
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, Farbe)
drawImage (Bild, xPosition, yPosition)
drawImage (Bild, xPosition, yPosition, newWidth, newHeight)
drawImage (Bild, xCrop, yCrop, xPosition, yPosition, newWidth, newHeight)
beginPath ()
moveTo (xPosition, yPosition)
lineTo (xPosition, yPosition)
isPointInPath (xPosition, yPosition)
Kommentar: Gibt true zurück, wenn der Strompfad
Schlaganfall()
closePath ()
create (Bild, "repeat")
Kommentar: Andere Muster sind "No-repeat", "Repeat-x", "Repeat-y"
clearRect (xPosition, yPosition, Breite, Höhe)
fillRect (xPosition, yPosition, Breite, Höhe)
strokeRect (xPosition, yPosition, Breite, Höhe)
rect (xPosition, yPosition, Breite, Höhe)
fillText (string, xPosition, yPosition, maxWidth)
Kommentar: maximale Breite ist optional.
strokeText (string, xPosition, yPosition, maxWidth)
Kommentar: maximale Breite ist optional.
measureText (string)
Kommentar: Gibt ein Objekt zurück, das die Breite in Pixel enthält
drehen (Winkel)
Skala (scaleHorizontal, scaleVertical)
übersetzen (xTranslation, yTranslation)
setTransform (scaleX skewY, skewX, scaleY, translateX, translateY)