Share
Mit dem Aufkommen von Tools wie Adobe Edge und Bibliotheken wie EaselJS stehen Entwicklern, die interaktive HTML5-Inhalte erstellen möchten, mehr Ressourcen zur Verfügung. Viele dieser Tools richten sich speziell an Flash-Entwickler, um den Übergang von der ActionScript- zur HTML5-Zeichenfläche reibungslos zu gestalten. Dieser Artikel gibt einen Überblick über oCanvas, eine HTML5-Bibliothek, die Entwickler nicht nur von unschätzbarem Wert finden, sondern auch sehr einfach zu verwenden sind.
Bevor wir uns mit oCanvas auseinandersetzen, wollen wir uns schnell einen Überblick über die Funktionsweise der HTML5-Zeichenfläche geben. Wenn Sie ausführlichere Informationen zur Verwendung der HTML5-Zeichenfläche benötigen, lesen Sie dieses Tutorial.
Wenn Sie ActionScript kennen, kennen Sie bereits eine Menge von JavaScript. In diesem Bereich liegt die eigentliche Stärke beim Arbeiten mit Canvas. Wir verwenden die HTML5-Zeichnungs-API, um unseren Inhalt zu erstellen, zusammen mit gutem JavaScript, um interaktiv und dynamisch zu sein. Wenn wir jedoch beides kombinieren, ist der Ansatz, wie wir unseren Code zusammenstellen, etwas anders als bei ActionScript.
Kurz gesagt: Um die native Canvas-API zu verwenden, zeichnen wir Pixel in den Zeichnungskontext der Leinwand. Das Wichtigste ist jedoch, dass wir mit der gesamten Leinwand arbeiten, nicht nur mit einer einzigen Form oder einem Bild, das wir gezeichnet haben. Jedes Mal, wenn wir etwas ändern möchten, das wir gezeichnet haben, müssen wir die gesamte Leinwand neu zeichnen. Wenn wir etwas animieren möchten, müssen wir die Leinwand in JavaScript immer wieder neu zeichnen, um den Eindruck zu erwecken, dass sich die Dinge bewegen.
Diese Vorstellung ist der traditionellen Animation sehr ähnlich, bei der Animatoren jede einzelne Pose in ihrer Sequenz zeichnen und die Kamera sehr schnell durchfahren müssen, um Bewegungen zu simulieren. Wenn Sie jedoch an baumartige Strukturen wie das DOM oder die Anzeigeliste in Actionscript gewöhnt sind, kann es schwierig sein, diese Vorstellung zu verstehen. Dieser Spül- und Wiederholungsansatz bei der Programmierung unterscheidet sich wesentlich von der Arbeit mit Objekten für die meisten Entwickler.
Zum Glück für diejenigen von uns, die es gewohnt sind, mit Objekten zu arbeiten, bringt oCanvas die vertraute Herangehensweise an die HTML5-Leinwand. oCanvas ist eine JavaScript-Bibliothek, die von Johannes Koggdal entwickelt wurde, um die Entwicklung mit HTML5-Canvas zu erleichtern. Sie können direkt mit Objekten arbeiten, deren Eigenschaften ändern und Ereignisse mit ihnen verknüpfen, während Sie sich mit den wichtigsten Hintergründen der Dinge beschäftigen. Am besten von Johannes in seinem Blog:
Mein Ziel war es immer, es den Menschen wirklich leicht zu machen, Leinwandobjekte aus Objekten zu bauen. Ich entschied mich für den Namen oCanvas als eine Kontraktion von "object canvas".
Um oCanvas verwenden zu können, müssen Sie eine Kopie der Bibliothek in unsere HTML-Seite einfügen. Wir können entweder auf die von CDN gehostete Datei verweisen oder selbst eine lokale Kopie hosten. Wenn Sie zur oCanvas-Website wechseln, können Sie entweder eine Kopie der Bibliothek herunterladen oder sich die Referenz zu der von CDN gehosteten Version entnehmen. Die aktuelle Version ist 2.0 und wurde erst vor wenigen Wochen veröffentlicht, wodurch viele der Fehler der ursprünglichen Version behoben wurden. Auf der Site gibt es eine reduzierte Produktionsversion, die sich gut einsetzen lässt, wenn Sie bereit sind, Ihr Projekt bereitzustellen. Es gibt auch eine Entwicklungsversion, die unkomprimiert ist, aber besser zum Debuggen geeignet ist. Ich möchte direkt auf die gehostete Version verlinken, um das Laden und Zwischenspeichern durch den Browser zu beschleunigen.
Nachdem Sie einen Verweis auf oCanvas erstellt haben, müssen Sie als Nächstes ein Canvas-Element im Hauptteil unseres HTML-Codes einrichten und einen Verweis darauf erstellen, der in unserem Javascript verwendet werden soll.
Wenn Sie Ihr Skript über dem Zeichenbereichselement platzieren, müssen Sie es wie üblich in eine Funktion einschließen, damit Sie wissen, dass das DOM bereit ist. Es gibt ein paar Möglichkeiten, um hierher zu gelangen. Sie können entweder eine eigene Funktion erstellen und diese dann beim Laden in Ihrem body-Element aufrufen:
Funktion Main () // Ihr oCanvas-Code
Oder Sie können Ihren Code in oCanvas 'eingebundenes Code einschließen domReady () Methode. Dies ist das Äquivalent zu jQuery $ (Dokument) .ready (). In oCanvas verwenden wir das:
oCanvas.domReady (function () // Ihr Code hier);
Hinweis: Sie könnten jQuery verwenden $ (Dokument) .ready () Methode, wenn Sie wollten.
Dieser Code ist absolut notwendig und muss als erstes geschrieben werden, wenn Sie oCanvas verwenden.
var canvas = oCanvas.create (canvas: "#canvas", Hintergrund: "# 0cc", fps: 60);
In diesem Code speichern wir einen Verweis auf das Canvas-Element in unserem Dokument und erhalten Zugriff auf die Kerninstanz, mit der Sie Objekte erstellen können. Das erstellen() Die Methode verwendet ein Objekt als Argument, das die Funktionsweise von oCanvas steuert. Es gibt zahlreiche Eigenschaften, die in die übergehen erstellen() Methode, aber die einzige obligatorische ist die canvas-Eigenschaft: ein CSS-Selektor, der auf ein Canvas-Element innerhalb des DOMs zeigen muss.
Die anderen im obigen Code übergebenen Eigenschaften sind die Eigenschaften background und fps. Mit der Hintergrundeigenschaft können Sie einen Hintergrund auf die Leinwand anwenden, der CSS-Farbwerte, Farbverläufe und Bilder sein kann. Wenn es weggelassen wird, ist die Leinwand transparent. Die Eigenschaft fps legt die Anzahl der Bilder pro Sekunde fest, mit der eine Animation ausgeführt wird. Der Standardwert ist 30 fps.
Hinweis: Während wir einen Überblick über viele Funktionen in oCanvas geben, empfehle ich, die Dokumentation der Bibliothek zu lesen, um die einzelnen Abschnitte besser zu verstehen.
Es gibt zahlreiche Arten von Anzeigeobjekten, die Sie mit oCanvas erstellen können. Sie können Formen wie Rechtecke, Ellipsen, Polygone und Linien sowie Bilder, Text und sogar Sprite-Sheets erstellen. Um ein neues Anzeigeobjekt zu erstellen, verwenden wir das Anzeigemodul von oCanvas und geben an, welche Art von Anzeigeobjekt wir erstellen möchten, sowie einige grundlegende Eigenschaften - wie zum Beispiel:
var box = canvas.display.rectangle (x: 50, y: 150, Breite: 50, Höhe: 50, füllen: "# 000");
Um es dann zur Anzeige hinzuzufügen, nennen wir eine bekannte Methode für Ihre Flash-Entwickler…
Ja, ein Oldie, aber ein Goodie, der das Hinzufügen von Objekten zu oCanvas zu einem vertrauten Prozess macht. Um unsere Box der Leinwand hinzuzufügen, würden wir schreiben:
canvas.addChild (Box);
Genau wie in ActionScript, addChild () fügt das angegebene Objekt als untergeordnetes Objekt des Aufrufers hinzu. X und y des Kindes sind wiederum relativ zu seinem Elternteil. In diesem Fall machen wir box ein Kind der Leinwand, das wir so vereinfachen könnten:
box.add ();
Das hinzufügen() Die Methode fügt das Objekt auch zur Zeichenfläche hinzu. Dies ist wirklich dasselbe wie bei canvas.addChild (box). Aber addChild () ist am nützlichsten, um einem bereits erstellten Anzeigeobjekt ein Objekt als untergeordnetes Objekt hinzuzufügen, z.
var square = canvas.display.rectangle (x: 0, y: 0, Breite: 10, Höhe: 10, füllen: "# 990000"); box.addChild (Quadrat);
Schauen wir uns einige der verschiedenen Arten von Anzeigeobjekten an, die Sie in oCanvas erstellen können.
Sie haben bereits ein Quadrat gesehen, aber wir können das verwenden Rechteck Anzeigeobjekt, um viele Dinge zu erstellen. Hier ist ein Rechteck mit einem blauen Strich:
var Rechteck = canvas.display.rectangle (x: 500, y: 100, Breite: 100, Höhe: 200, füllen: "# 000", Strich: "außerhalb 2px blau");
Das füllen Diese Eigenschaft kann jede gültige CSS-Farbe sowie CSS-Verläufe und sogar Bildmuster annehmen.
Um eine Ellipse zu erstellen, schreiben wir:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, füllen: "rgba (255, 0, 0, 0.5)");
Wenn Sie einen vollständigen Kreis wünschen, ersetzen Sie einfach den radius_x und radius_y Eigenschaften mit einem einzigen Radius Eigentum.
Das Erstellen beliebiger Polygone ist genauso einfach - Sie müssen lediglich die Anzahl der Seiten und den Radius angeben, den Ihre Form haben soll. So erstellen Sie ein Dreieck:
var triangle = canvas.display.polygon (x: 320, y: 145, Seiten: 3, Radius: 50, füllen: "# 406618");
Wie wäre es mit einem Pentagon??
var pentagon = canvas.display.polygon (x: 200, y: 50, Seiten: 5, Drehung: 270, Radius: 40, füllen: "# 790000");
Um dies mit der HTML5-Canvas-API zu erreichen, müssten Sie eine Reihe von Pfaden zeichnen und versuchen, herauszufinden, an welchen X- und Y-Positionen sie miteinander verbunden werden sollen. Ich habe versucht, ein Achteck zu Vergleichszwecken zu zeichnen, aber wie Sie unten sehen können, gab ich leicht auf. Nicht ganz sicher, was das sein soll.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.Fill (); Das Erstellen von Anzeigeobjekten mit Bildern wird nicht einfacher als in oCanvas. Geben Sie einfach eine x- und y-Position und den Pfad zur Bilddatei an:
var tree = canvas.display.image (x: 100, y: 350, image: "tree.png");
Ein schönes Merkmal des Bildanzeigeobjekts ist das Fliese Mit dieser Eigenschaft können Sie auf einfache Weise ein Raster aus demselben Bild erstellen, anstatt es immer wieder zu zeichnen.
oCanvas enthält ein Textanzeigeobjekt und behandelt den Schriftstil wie CSS.
var text = canvas.display.text (x: 70, y: 300, ausrichten: "center", Schriftart: "fett 18px serifenlos", Text: "oCanvas Rocks", Füllung: "lila");
Sie können viele der anderen Texteigenschaften verwenden, die Sie mit CSS kennen. Weitere Informationen finden Sie in der Dokumentation zum Text.
Alle Anzeigeobjekte erben eine gemeinsame Gruppe von Eigenschaften und Methoden. Einige der häufigsten Eigenschaften von Anzeigeobjekten sind: x, y, Breite, Höhe, Drehung, SkalierungX, SkalierungY, Deckkraft, Schatten (verwendet CSS-Box-Shadow-Syntax) und zIndex. Sie können diesen Link für eine vollständige Liste der Basiseigenschaften und -methoden auschecken. Schauen wir uns noch ein paar andere bemerkenswerte an.
Diese Methode spart viel Zeit, da Sie den Ursprung innerhalb des Objekts leicht festlegen können. Mit anderen Worten, Sie können den Registrierungspunkt des Objekts festlegen. Wenn Sie jemals mit der HTML5 Canvas API versucht haben, eine Drehung von der Mitte aus durchzuführen, wissen Sie, wie groß der Kopfschmerz sein kann. Sie müssen eine Reihe von Aktionen ausführen, indem Sie den Zeichnungsstatus speichern, die Leinwand übersetzen, Ihre Drehung ausführen und dann den Zeichnungsstatus wiederherstellen. Mit dem Ursprung Mit dieser Eigenschaft können Sie leicht den Ursprung eines Objekts definieren:
var obj = canvas.display.image (x: 270, y: 270, Ursprung: x: "center", y: "center");
Dies würde das Bild aus seiner Mitte ziehen. Wenn wir das Objekt drehen, wird es auch von seiner Mitte aus gedreht. Neben "center" können Sie auch "left" oder "right" für x und "top" oder "bottom" für die y-Position eingeben. Neben den vordefinierten Schlüsselwörtern können Sie auch positive oder negative Zahlen als Werte angeben, an denen das Objekt gezeichnet werden soll. Der Standardursprung für alle Anzeigeobjekte ist oben links definiert.
Sie können auch die setOrigin () Methode jederzeit zur Definition des Ursprungs eines Objekts:
obj.setOrigin ("left", "bottom") Die ID eines Anzeigeobjekts, bei der es sich um eine schreibgeschützte Eigenschaft handelt, entspricht der Position, an der sich das Objekt in der Zeichnungsliste befindet. Dies kann als Anzeigeliste bezeichnet werden. Ich finde es sehr nützlich, da es in bestimmten Situationen als eindeutiger Bezeichner dienen kann, wenn Sie ein bestimmtes Objekt in Ihrem Code suchen. Betrachten Sie einen grundlegenden Ausschnitt wie diesen:
getId (box.id) -Funktion getId (id) if (id == 9) console.log ("CORRECT!" + id) else console.log ("FALSCH!" + id) Die Zusammensetzungseigenschaft entspricht dem von globalCompositeOperation innerhalb der nativen Canvas-API. Wenn Sie sich nicht damit auskennen, bestimmt dies grundsätzlich, wie Pixel dargestellt werden, wenn sie auf bereits vorhandene Pixel in der Leinwand gezeichnet werden. Ich empfehle Ihnen, sich mit den verschiedenen Compositing-Operationen vertraut zu machen, die Sie einstellen können. Mit oCanvas können Sie jedoch einfach die gewünschte Operation festlegen, indem Sie sie als String übergeben:
var shape = canvas.display.rectangle (x: 270, y: 270, Breite: 180, Höhe: 80, füllen: "# ff6900", Komposition: "destination-atop");
Es gibt viele verschiedene Operationen, die Sie übergeben können, aber ich denke, eines der schönen Dinge, die Sie mit der Kompositionseigenschaft machen können, ist das Erstellen von Masken zwischen verschiedenen Anzeigeobjekten. Checken Sie die Datei aus masken.html im Downloadpaket. Wenn Sie sich jemals darauf verlassen haben, Ebenenmasken in Ihren Flash-Anwendungen zu erstellen, werden Sie diese genießen.
Da wir rotierende Objekte bereits erwähnt haben, können Sie ein Objekt schnell mit dem Symbol drehen drehen() und rotateTo () Methoden:
obj.rotate (45);
Sie können die Rotationseigenschaft auch einfach festlegen:
obj.rotation = 45;
Es gibt auch die Bewegung() und ziehen nach() Methoden, mit denen Sie, wie ihre Namen vermuten lassen, ein Objekt um eine bestimmte Pixelanzahl für die erstere und an eine angegebene x- und y-Position für die letztere verschieben können.
obj.moveTo (100, 100)
Die gleiche Idee funktioniert für die Rahmen() und scaleTo () Methoden ():
obj.scale (1.25, 0.25) obj.scaleTo (1.5, 1.5)
Wir haben erwähnt addChild () Vor; lass uns nicht vergessen removeChild () und removeChildAt (). Und wie die hinzufügen() Methode können wir das Gegenteil mit machen Löschen().
Eine andere wirklich nützliche Methode ist Klon(), Damit können Sie ein Anzeigeobjekt und alle seine Eigenschaften duplizieren.
var box = canvas.display.rectangle (x: 50, y: 150, Breite: 50, Höhe: 50, füllen: "# 000"); var box2 = box.clone (x: 200)
Ein großer Vorteil von oCanvas ist, dass Sie bestimmten Objekten Ereignisse hinzufügen können. Der oCanvas enthält viele Methoden und Eigenschaften, um Maus-, Tastatur- und sogar Berührungsereignisse auf einfache Weise zu handhaben.
Wenn Sie mit jQuery vertraut sind, wissen Sie wahrscheinlich bereits, wohin ich damit gehe.
canvas.bind ("click tap", function () canvas.background.set ("# efefef");); Sie müssen lediglich die Hintergrundfarbe der Leinwand ändern. Beachten Sie jedoch, wie wir mit "Klick" vorbeigehen. So können Sie problemlos Maus- und Touch-Geräte unterstützen.
Neben Klickereignissen können Sie auch andere Mausereignisse abhören:mousedown, mouseup, mousemove, mouseenter, mouseleave und dblclick.
Ein einfacher Rollover-Effekt könnte folgendermaßen aussehen:
box.bind ("mouseenter", function () canvas.background.set ("# 333");). bind ("mouseleave", function () canvas.background.set ("# 000"); ); Dies ist ein Beispiel für die Verkettung von Funktionen - was (nicht wie ein gebrochener Datensatz klingt) ein weiteres Feature von jQuery ist, das in oCanvas verwendet wird.
Aber anstatt die Leinwand zu ändern, wenn ein Mausereignis auftritt, was ist mit einem tatsächlichen Anzeigeobjekt? Dies ist immer noch HTML5 Canvas, daher müssen wir daran denken, eine wichtige Methode aufzurufen, um den Canvas anzuweisen, sich selbst zu aktualisieren.
Das neu zeichnen () Die Methode (die eigentlich Teil des Draw-Moduls ist, nicht des Ereignismoduls) zeichnet die Leinwand mit allen hinzugefügten Anzeigeobjekten neu. Wenn Sie also eine Aktion für ein bestimmtes Objekt ausführen möchten und der Rest der Zeichnungsliste intakt bleiben soll, müssen wir unseren Funktionen eine einfache Codezeile hinzufügen:
square.bind ("click tap", function () square.x + = 50; canvas.redraw ();); Was nützt ein Ereignis-Listener, wenn wir ihn nicht entfernen können?
rechteckle.bind ("click tap", Funktion onClick () this.fill = "# FF9933"; canvas.redraw (); rechteckle.unbind ("click tap", onClick)); Wir brauchen das nicht binden() Methode für diese. Wir schreiben einfach:
circle.dragAndDrop ();
Das ist wahrscheinlich der schnellste und einfachste Drag & Drop-Code, den Sie jemals schreiben werden.
Hinweis zu Veranstaltungen: Wenn Sie mit Ereignissen arbeiten, ist es selbstverständlich, so viele Informationen wie möglich über das Ereignis zu erhalten. Glücklicherweise können wir dies immer noch tun, wenn Sie mit oCanvas arbeiten. Wenn wir beispielsweise den Click-Handler ein paar Zeilen lang nehmen und das Ereignis in der Konsole protokollieren, können wir alle Eigenschaften des Ereignisses sehen.
rechteckle.bind ("click tap", Funktion onClick (e) this.fill = "# FF9933"; canvas.redraw (); rechteckle.unbind ("click tap", onClick); console.log (e); ); 
Neben Mausereignissen verfügt oCanvas über vollständige Module für Tastatur- und Berührungsereignisse mit ihren eigenen einzigartigen Methoden und Eigenschaften. Diese Ereignisse werden auch mit der behandelt binden() Methode. Das Ereignissystem in oCanvas ist ein sehr breites Thema. Ich möchte daher den Abschnitt über Ereignisse in der Dokumentation und im Experimentieren betrachten.
Mit dem Timeline-Modul können wir unsere Hauptschleife für unsere Anwendung einrichten. Wenn Sie ein Spiel erstellen, ist dies im Wesentlichen Ihre Spielschleife. Ich betrachte es gerne als das Äquivalent eines ENTER_FRAME in Flash.
Es ist einfach einzurichten - wir rufen einfach an setLoop Funktion und Kette der Start() Methode dazu:
canvas.setLoop (function () triangle.rotation + = 5;). start ();
Wenn wir die binden wollten setLoop () Funktion zu einem Ereignis - etwa zu einem Mausklick - wir könnten so etwas tun:
canvas.setLoop (function () triangle.rotation + = 5;) button.bind ("click tap") function () canvas.timeline.start (); Und wir könnten die Zeitleiste stoppen, indem wir einfach anrufen:
canvas.timeline.stop ();
Verwenden setLoop () ist der Weg für Animationen, die über einen längeren Zeitraum hinweg auftreten, und um ständige Aktualisierungen durchzuführen, die Sie in Ihrer gesamten Anwendung vornehmen müssen. OCanvas verfügt jedoch über integrierte Methoden, um einfachere und grundlegendere Animationen zu handhaben, die häufig benötigt werden. Diese Methoden werden auch praktisch von jQuery übernommen.
Das animieren() Die Methode funktioniert genauso wie in jQuery. Wenn Sie mit dieser Seite von jQuery nicht vertraut sind, sollten Sie sich eine Tween-Engine wie TweenMax oder Tweener für Flash vorstellen. Sie können jede Eigenschaft animieren, die durch einen numerischen Wert festgelegt werden kann:
circle.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "ease-in"), function () circle.fill = "# 45931e"; canvas.redraw (););
Hier animieren wir die y-Position und die Gesamtgröße des Kreises, wenden einige Erleichterungen an und führen nach Abschluss eine Callback-Funktion aus, die die Füllfarbe ändert. Aber vergiss nicht anzurufen neu zeichnen ().
einblenden(), ausblenden(), und fadeTo () Um ein Objekt ein- und auszublenden, könnten wir einfach Folgendes aufrufen:
square.fadeIn (); square.fadeOut ();
Um die Deckkraft auf einen bestimmten Wert zu bringen, verwenden wir fadeTo ():
square.fadeTo (.6);
Sie können auch die Dauer, die Beschleunigung und die Rückruffunktion für diese Methoden auf dieselbe Weise festlegen wie bei animieren() Methode.
oCanvas enthält ein sehr nützliches Szenenmodul, mit dem Sie Ihre Anwendung einfach in verschiedene Zustände unterteilen können. Spieleentwickler mögen dies schätzen, weil es ein einfacher Ansatz ist, um Ihr Spiel in verschiedene Abschnitte zu unterteilen. Sogar Flash-Animatoren der alten Schule können das Szenenmodul mit dem Szenenbedienfeld vergleichen, wodurch Sie buchstäblich verschiedene Szenen in einem Flash-Projekt erstellen können.
Um eine Szene in oCanvas zu erstellen, nennen wir das erstellen() Methode zur Rückgabe a Szenen Objekt:
var intro = canvas.scenes.create ("intro", function () // hier Anzeigeobjekte hinzufügen); Innerhalb des erstellen() Diese Methode übergeben wir in zwei Argumenten: dem Namen der Szene als String und einer Funktion, in der wir das Anzeigeobjekt hinzufügen, das wir der Szene hinzufügen möchten.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, ausrichten: "center", font: "fett 36px sans-serif"), text: "Introduction", füllen: "# 133035"); var intro = canvas.scenes.create ("intro", function () this.add (introText);); Nun müssen wir unsere Szene laden und diese Objekte werden der Anzeige hinzugefügt:
canvas.scenes.load ("intro"); Beachten Sie, dass wir den Namen weitergeben, den wir der Szene gegeben haben, als wir sie erstellt haben.
Und natürlich können wir jederzeit eine Szene ausladen:
canvas.scenes.unload ("intro"); Stellen Sie sich vor, wie viel Zeit Sie sparen könnten, wenn Sie Szenen und Event-Handler zusammen verwenden.
Der einzige wirkliche Nachteil von oCanvas ist, dass es in der Entwicklungsgemeinschaft nicht so viel an Zugkraft gewonnen hat, wie Sie vielleicht denken - oder zumindest scheint es im Moment so zu sein. Ein Teil dieses Grundes, denke ich, liegt in der Popularität von EaselJS. Es scheint viel mehr Bewusstsein und Ressourcen für EaselJS zu geben als für OCanvas - was schwer zu glauben ist, seit letztere im März 2011 veröffentlicht wurde, aber aus irgendeinem Grund ist es unter dem Radar geflogen.
Ich benutze beide Bibliotheken schon länger, und ich kann ehrlich sagen, dass ich ein großer Fan von beiden bin. EaselJS fühlt sich auf jeden Fall mehr wie ActionScript an, und wenn Sie ein Flash-Entwickler sind, ist es leicht zu erlernen. Und wie wir gesehen haben, könnte oCanvas in vielerlei Hinsicht für den lange verlorenen Bruder von jQuery passen. Wenn Sie also ein reiner ActionScripter sind, können Sie sich ganz einfach zu EaselJS hingezogen fühlen - zumal Easel speziell für Flash-Entwickler geschrieben wurde.
Ich benutze Actionscript jedoch viel länger als jQuery und finde persönlich, dass oCanvas einfacher zu verwenden ist und weniger ausführlich zu schreiben ist. Und obwohl EaselJS selbst ziemlich einfach zu bedienen ist, macht es die einfache Syntax in oCanvas einfach zu einem willkommenen Werkzeug.
Abgesehen von der einfacheren Syntax sind oCanvas und EaselJS in vielerlei Hinsicht ziemlich austauschbar. Beide Bibliotheken können mehr oder weniger dieselben Aufgaben ausführen, und es gibt kaum einen Leistungsunterschied, wenn überhaupt. Ich bemerke jedoch, dass die Ticker-Funktion in EaselJS etwas reibungsloser läuft als oCanvas '. setLoop Funktion (obwohl dies nur ein Browser-basierter Unterschied sein kann).
EaselJS hat eine weitaus umfangreichere API - insbesondere beim Zeichnen und bei Effekten. Wenn Sie TweenJS und SoundJS in Betracht ziehen, ist Easel definitiv ein umfassenderes Tool - insbesondere, wenn Sie es gewohnt sind, eine Anwendung wie Flash zu verwenden, die eine fein abgestimmte Steuerung Ihrer Projekte ermöglicht. Wenn Sie jedoch noch nicht mit dem gesamten HTML5-Spiel vertraut sind, werden Sie wahrscheinlich mit oCanvas schneller starten. Als ich zum ersten Mal mit oCanvas bekannt wurde, hat es mir so viel Spaß gemacht, damit zu spielen. Alles ist bereits für Sie da - alle notwendigen Methoden und Ereignisse, um sofort Objekte erstellen, bearbeiten und animieren zu können.
Unabhängig davon, welche Bibliothek Sie bevorzugen, sind oCanvas und EaselJS nur der Anfang meines Erachtens an Werkzeugen und Ressourcen, mit denen Entwickler einfach browserbasierte Anwendungen erstellen können. Die Features von oCanvas, die in diesem Artikel beschrieben werden, kratzen kaum die Oberfläche dessen, was mit dieser sehr leistungsfähigen Bibliothek erstellt werden könnte.
Auf keinen Fall ist oCanvas (oder eine Bibliothek für diese Angelegenheit) jedoch ein Grund, die native HTML5 Canvas API nicht zu lernen und zu verwenden. Wenn Sie sich jedoch in einer Situation befinden, in der alle Ihre früheren Flash-Clients nun nach HTML5-Apps (wie meinen) suchen, und Sie keine Zeit haben, etwas über die unfreundliche Transformationsmatrix in der nativen Canvas-API - oCanvas zu lernen kann definitiv die Lernkurve erleichtern.
