HTML5-Canvas-Framework für Fortgeschrittene

Question

Ich brauche HTML5 Leinwand Rahmen zu tun:

• Objekt zeichnen (z.B. Rechteck)
• beim Onmouseover-Ereignis des Objekts Farbe/Rahmenstil ändern
• bei Klick eine js-Aktion ausführen

thx

EDIT: Ich habe mich schließlich für die Verwendung von raphaeljs (eine Alternative wäre Dojo ). Dieses Framework ist großartig. (Es braucht keine HTML5-Canvas und verwendet SVG)

Answer 1

Was Sie wirklich wollen, ist wohl eine Beibehaltungsmodus Grafikschnittstelle, bei der Sie ein Objekt erstellen, Mausereignisse abrufen, seine Eigenschaften ändern, es verschieben usw. und den Browser bei Bedarf den Bildschirm neu zeichnen lassen können. In diesem Fall wären Sie mit SVG besser dran als mit <canvas> die als ein Sofortmodus Die Grafikoberfläche ist wirklich nur ein Kasten voller Pixel.

Answer 2

Vergessen Sie nicht über KineticJS, die viel besser als die, die Sie erwähnt haben, führt, plus es hat eine viel einfachere API

Answer 3

Schauen Sie sich diese Frage an:

Was ist der aktuelle Stand der Technik bei HTML-Canvas-JavaScript-Bibliotheken und -Frameworks?

Fabric.js ist sehr beeindruckend und CAKE ist auch eine gute Bibliothek.

Answer 4

BHive macht das wirklich gut, und da ich von einem Actionscript-Hintergrund komme, fand ich es ziemlich einfach zu benutzen. Ich musste mir die Demos ansehen, da die Dokumentation nicht hilfreich ist!

Um Ihnen zu helfen

square = engine.createShape({
    shape: 'square',
    style: 'filled',
    backgroundColor: '#000',
    width: 120,
    height: 20,
    x: 20,
    y: 100
});

Um eine Mausaktion auszuführen, müssen Sie sie zu einem Clip-Objekt hinzufügen.

clip = engine.createClip({ x: 20, y: 20 });

Dann

clip.add(square);

Hinzufügen eines Ereignis-Listeners

clip.addEventListener('onmouseover',function(e) { some code ... });
clip.addEventListener('onclick',function(e) { some code ... });

In der Schleife müssen Sie dann das Quadrat zeichnen.

clip.draw();

Ich benutze den Quellcode der Demos, um mir zu helfen, also schaue ich mir vielleicht http://www.bhivecanvas.com/demos/cargame.php da diese Rollover und Onclicks enthält.