Saat ini saya sedang menyelidiki opsi untuk bekerja dengan kanvas di aplikasi HTML 5 baru, dan bertanya-tanya apa yang terkini dalam perpustakaan dan kerangka kerja JavaScript kanvas HTML?
Secara khusus, apakah ada kerangka kerja yang mendukung hal-hal yang diperlukan untuk pengembangan game - animasi kompleks, mengelola grafik adegan, menangani peristiwa, dan interaksi pengguna?
Juga bersedia mempertimbangkan produk komersial dan open source.
javascript
frameworks
html
canvas
Toby Hede
sumber
sumber
Jawaban:
Saya telah mengerjakan fabric.js - perpustakaan kanvas untuk membantu dengan hal itu - memanipulasi objek di kanvas, dengan menangani peristiwa dan interaksi pengguna. Ini belum dirilis, tapi lihat demo pratinjau sederhana .
Anda juga dapat melihatnya beraksi di editor desain ini , yang awalnya dibuat untuknya.
Sunting: Proyek ini sekarang tersedia di github (bersumber terbuka di bawah Lisensi MIT)
Untuk memulai, lihat:
Bagaimana Fabric dibandingkan dengan pustaka kanvas Javascript lainnya? Berikut tabel perbandingannya .
sumber
Saya terkejut tidak ada yang menyebutkan WebGL , dan kerangka kerja dibangun di atasnya. Saya akan menganggapnya sebagai yang teratas dalam daftar state-of-the-art untuk grafik akselerasi GPU 3D dan animasi kompleks pada kanvas / javascript HTML.
WebGL sangat solid dalam mendukung grafik berakselerasi GPU. Lihat demo shader GLSL ini . :-) Dan lihat ChemDoodle sebagai contoh interaksi pengguna.
Saya telah mengerjakan aplikasi menggunakan kerangka kerja O3D Google , yang mengelola grafik adegan, dan menggunakan WebGL untuk rendering (dulu menggunakan pluginnya sendiri). O3D sedang dalam proses, dan dokumentasinya belum sepenuhnya mutakhir, tetapi sedang dalam pengembangan aktif, dan ada beberapa demo bagus di luar sana . Pool 3D mungkin paling cocok untuk Anda. Pengembang Google sangat responsif terhadap pertanyaan di grup diskusi.
Ada sejumlah kerangka kerja lain yang dibangun di atas WebGL; lihat disini . Yang menyebutkan pengembangan game dan grafik adegan termasuk Copperlicht, SceneJS, X3DOM.
WebGL berjalan dalam versi pengembangan terkini dari beberapa browser , tetapi tidak di IE. Saya telah menggunakan Firefox ("Minefield") dan Chromium dengan hasil yang bagus. Anda akan membutuhkan salah satunya untuk menjalankan demo di atas.
Namun jika persyaratan Anda adalah tidak boleh memiliki dependensi di luar HTML 5 canvas / js, WebGL mungkin bukan pilihan yang tepat. Sepertinya IE tidak akan mendukungnya dalam waktu dekat.
Pembaruan: setelah melakukan banyak perlawanan, MS memutuskan untuk mendukung WebGL di IE 11 .
sumber
three.js , oleh mr. doob , adalah mesin 3d yang luar biasa untuk javascript yang mencakup skenario (versi akselerasi perangkat lunak dan WebGL / perangkat keras), bayangan, partikel, animasi berkulit (menurut saya), dan efek pencahayaan. Coba lihat, dia adalah orang yang sangat berbakat.
Saya harus menambahkan bahwa Anda akan memerlukan Google Chrome terbaru atau yang setara untuk melihat sebagian besar demo, salah satu favorit saya adalah: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
sumber
KineticJS adalah perpustakaan yang sedang naik daun yang menawarkan pembuatan dan animasi "lapisan" individu di atas kanvas untuk kinerja tinggi.
http://www.kineticjs.com/
sumber
CAKE.js tidak lagi dipertahankan tetapi merupakan kerangka kerja yang cukup kuat - http://code.google.com/p/cakejs/
Demo di sini - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
sumber
Lihatlah kerangka processingjs . Juga mootools versi 2.0 yang akan datang memiliki proyek seni untuk bekerja dengan kanvas
sumber
Raphael tampaknya perpustakaan kanvas yang cukup bagus; itu berbasis SVG (atau berbasis VML di Internet Explorer), dan dengan demikian mendukung banyak peristiwa input pengguna. Ini cukup kecil (60kb gzip), jadi tidak terlalu besar ketergantungan.
Tampaknya ini juga memiliki tweener yang bagus: http://raphaeljs.com/reference.html#animate (lihat di sini dan di sini untuk contoh).
Untuk contoh apa yang dapat dilakukannya, lihat demo kecil yang cerdas ini .
Semoga ini membantu!
sumber
Saya telah menemukan dua perpustakaan menjadi sangat kompetitif dan jauh lebih baik daripada kain.
Kinetic.js dan easel.js keduanya memiliki penanganan acara, pengelompokan, dan abstraksi bentuk umum yang sangat baik. Anda akan menemukan banyak hal untuk dicintai dalam keduanya; kuda-kuda tampaknya lebih berorientasi pada gambar dan penyaringan.
Event handlins Fabric JAUH lebih buruk daripada salah satu dari ini - pada dasarnya ia memperlakukan seluruh kanvas sebagai satu event rrapper besar dan memberi tahu Anda ketika "Sesuatu" telah diklik. Itu tidak melampirkan acara ke bentuk individu atau kelompok bentuk.
sumber
Ada perpustakaan menarik yang bertujuan untuk meningkatkan beberapa dasar kerja dengan API kanvas yang disebut canto.js oleh David Flanagan, penulis Javascript: The Definitive Guide .
sumber
Juga, kerangka Javascript muda, tapi tidak buruk, dan itu (animasi kompleks, mengelola grafik adegan, menangani peristiwa dan interaksi pengguna) semuanya tentang itu - jCanvaScript . Mungkin, kecuali 'mengelola grafik adegan'.
sumber
Bekerja dengan bHive untuk menghasilkan grafik dan memindahkan header situs, tampak mengesankan dan kuat, tidak seperti yang lain tampaknya sedang dikembangkan. Adobe Edge juga patut dilihat meskipun bukan Canvas.
http://www.bhivecanvas.com
dan
http://labs.adobe.com/technologies/edge/
sumber
Aves Engine benar-benar hebat: http://www.dextrose.com/en/projects/aves-engine
Juga, Akihabara tampaknya bagus: http://www.kesiev.com/akihabara/
sumber
Jika Anda ingin menggunakan Javascript, Dojo adalah cara yang tepat. Ini memiliki API grafik vektor lintas platform (SVG, VML, Canvas, Silverlight) yang kompak dan sangat kuat. Anda dapat menemukannya di dojo.gfx dan dojox.gfx.
Kami telah menggunakan ini untuk membangun tutor fisika interaktif yang memungkinkan siswa menggambar vektor, elipsis, dll (bahkan menambahkan gambar) dan melakukan segala macam transformasi padanya. Anda dapat melihat apa yang telah kami lakukan di http://gideon.eas.asu.edu/web-UI/login.html - cukup masuk dengan nama pengguna apa pun.
Saya telah melihat fabric.js dan dojox.drawing melakukan banyak hal yang sama. Jika Anda melihat tes di toolkit (setelah Anda mendapatkannya dojox / drawing / tests /) Anda menemukan contoh dari segala hal mulai dari grafik vektor hingga gambar hingga bayangan yang dibuat secara terprogram.
sumber
Saya terkesan dengan Akihabara sebagai mesin game. Ini memiliki dokumentasi yang fantastis dalam bentuk tutorial dan api. Saya bahkan pernah melihat di beberapa papan pesan berbicara tentang rilis akihabara 2. Sayangnya, semua pembicaraan itu berumur sekitar satu tahun atau lebih. Saya sangat berharap mesin ini terus dikembangkan.
sumber
Saya baru saja merilis iterasi pertama dari pustaka gambar & tweening baru yang ditujukan untuk orang-orang dengan latar belakang pengembangan AS3 / Flash. Sementara lib saya belum mendukung jalur gambar atau grafik yang kompleks, saya berharap ini akan membantu orang dengan cepat menggambar & menganimasikan primitif dasar dengan cara yang akrab.
Umpan balik dan komentar diterima. http://www.quietless.com/kitchen/introducing-js3/
sumber