HTML कैनवास जावास्क्रिप्ट लाइब्रेरी और फ्रेमवर्क में कला की वर्तमान स्थिति क्या है? [बन्द है]


107

मैं वर्तमान में एक नए HTML 5 एप्लिकेशन में कैनवास के साथ काम करने के विकल्पों की जांच कर रहा हूं, और सोच रहा था कि HTML कैनवास जावास्क्रिप्ट लाइब्रेरीज़ और फ्रेमवर्क में कला की वर्तमान स्थिति क्या है?

विशेष रूप से, क्या ऐसे फ्रेमवर्क हैं जो खेल के विकास के लिए आवश्यक चीजों का समर्थन करते हैं - जटिल एनीमेशन, दृश्य रेखांकन का प्रबंधन, घटनाओं और उपयोगकर्ता की बातचीत को संभालना?

इसके अलावा दोनों वाणिज्यिक और खुले स्रोत उत्पादों पर विचार करने को तैयार हैं।


यदि आप दृश्य ग्राफ़ और हैंडलिंग इवेंट्स का उपयोग कर रहे हैं, तो क्या SVG आपकी आवश्यकताओं के लिए बेहतर नहीं है?
जोएरी सेब्रचेट्स

खैर, यही कारण है कि मैं पूछ रहा हूँ। कैनवस में निश्चित रूप से गति है, इसलिए यह पता लगाने की कोशिश की जा रही है कि क्या संभव है और क्या नहीं। जब यह जटिल एनिमेशन की बात आती है तो एसवीजी विशेष रूप से अच्छी तरह से स्केल नहीं करता है।
टोबी हैड

क्या आप विशेष रूप से 3 डी ग्राफिक्स, या 2 डी, या एक के लिए देख रहे हैं?
21

यहां एक और अच्छा डेमो: kevs3d.co.uk/dev/asteroids । निश्चित नहीं है कि उनके द्वारा बनाई गई लाइब्रेरी सभी के उपयोग के लिए उपलब्ध है। हालांकि कैनवास का एक अच्छा उदाहरण है।
कास्त्रोहेंगे

jsfiddle.net/user/zlatnaspirala/fiddles इस फ्रेमवर्क VisualJS को आज़माएं।
निकोला ल्यूक

जवाबों:


96

Fabric.js स्क्रीनशॉट

मैं fabric.js पर काम कर रहा हूँ - एक कैनवास लाइब्रेरी जिसमें ठीक से मदद करने के लिए - घटनाओं और उपयोगकर्ता के इंटरैक्शन को संभालने के द्वारा कैनवास पर वस्तुओं में हेरफेर करना। यह अभी तक रिलीज़ नहीं हुआ है, लेकिन एक साधारण पूर्वावलोकन डेमो पर एक नज़र डालें ।

आप इसे इस डिज़ाइन संपादक में एक्शन में भी देख सकते हैं , जिसे मूल रूप से इसके लिए बनाया गया था।

संपादित करें: यह परियोजना अब जीथब पर उपलब्ध है (एमआईटी लाइसेंस के तहत खुली खटास )

आरंभ करने के लिए, देखें:

कपड़े अन्य जावास्क्रिप्ट कैनवास पुस्तकालयों की तुलना कैसे करता है? यहाँ एक तुलना तालिका है


यह IE पर क्या करता है? ExplorerCanvas?
साशा चोडगोव १४'१० को

14
यही कारण है कि एक अद्भुत प्रदर्शन, अत्यंत प्रभावशाली परियोजना है
को अनमाउंट

3
@musicfreak Yes, ExplorerCanvas Btw, यह IE9 (4th पूर्वावलोकन) में सभी ~ 900 परीक्षणों को पारित करता है, अपने मूल कैनवास समर्थन का उपयोग करके।
kangax 5

4
कपड़े के लिए एक परियोजना पृष्ठ है। कहीं भी? मैं इसके बारे में अधिक जानने में बहुत रुचि रखता हूं।
अर्ने रूमन-कुर्रिक

वाह, बस मुझे क्या चाहिए ... मैं वास्तव में इस पुस्तकालय इतनी आसानी से संभालती कार्यों का प्रबंधन करने के लिए कितना मुश्किल था के साथ निराश था!
शॉविक

17

मुझे आश्चर्य है कि किसी ने भी WebGL और उस पर निर्मित रूपरेखाओं का उल्लेख नहीं किया है । मैं इसे 3D GPU- त्वरित ग्राफिक्स और HTML कैनवास / जावास्क्रिप्ट पर जटिल एनीमेशन के लिए अत्याधुनिक की सूची पर उच्च विचार करूंगा।

WebGL, OpenGL ES 2.0 पर आधारित निम्न-स्तर के 3D ग्राफ़िक्स API के लिए क्रॉस-प्लेटफ़ॉर्म, रॉयल्टी-फ्री वेब मानक है, जिसे HTML5 कैनवास तत्व के माध्यम से डॉक्यूमेंट ऑब्जेक्ट मॉडल इंटरफेस के रूप में उजागर किया गया है। ...

WebGL वेब में प्लगइन-मुक्त 3D लाता है, जिसे ब्राउज़र में सही से लागू किया जाता है। प्रमुख ब्राउज़र विक्रेता Apple (सफारी), Google (क्रोम), मोज़िला (फ़ायरफ़ॉक्स), और ओपेरा (ओपेरा) WebGL वर्किंग ग्रुप के सदस्य हैं।

GPU- त्वरित ग्राफिक्स के लिए WebGL अपने समर्थन में बहुत ठोस है। इन GLSL शैडर डेमो की जाँच करें । :-) और उपयोगकर्ता बातचीत के उदाहरण के रूप में केमडूड को देखें ।

मैं Google के O3D ढांचे का उपयोग करते हुए एक ऐप पर काम कर रहा हूं , जो दृश्य ग्राफ का प्रबंधन करता है, और प्रतिपादन के लिए वेबजीएल का उपयोग करता है (यह अपने प्लग-इन का उपयोग करता था)। O3D एक कार्य प्रगति पर है, और इसका प्रलेखन पूरी तरह से अद्यतित नहीं है, लेकिन यह सक्रिय विकास के अधीन है, और वहाँ कुछ अच्छे डेमो हैं3 डी पूल आपकी गली से सबसे ऊपर हो सकता है। Google डेवलपर्स चर्चा समूह में प्रश्नों के प्रति बहुत संवेदनशील हैं।

वेबलॉग पर निर्मित कई अन्य ढांचे हैं; यहाँ देखें । खेल विकास और दृश्य रेखांकन का उल्लेख करने वाले लोगों में कॉपरलिक्ट, सीनेज़, एक्स 3 डीओएम शामिल हैं।

WebGL हाल के विकास में कई ब्राउज़रों के निर्माण में चलता है , लेकिन IE नहीं। मैं अच्छे परिणामों के साथ फ़ायरफ़ॉक्स ("माइनफ़ील्ड") और क्रोमियम का उपयोग कर रहा हूं। उपरोक्त डेमो को चलाने के लिए आपको इनमें से एक की आवश्यकता होगी।

हालाँकि, यदि आपकी आवश्यकताएं यह हैं कि HTML 5 कैनवास / js से परे इसकी कोई निर्भरता नहीं है, तो WebGL सही विकल्प नहीं हो सकता है। ऐसा नहीं लगता है कि IE जल्द ही कभी भी इसका समर्थन करेगा

अद्यतन: बहुत प्रतिरोध डालने के बाद, MS ने IE 11 में WebGL का समर्थन करने का निर्णय लिया



@ नूब: अच्छी बात है। तीन.जेएस वेबजीएल, एसवीजी या सादे (2 डी) कैनवास पर प्रस्तुत कर सकते हैं।
लार्स

15

तीन.जेएस , श्री द्वाराdoob , जावास्क्रिप्ट के लिए एक शानदार 3 डी इंजन है जिसमें दृश्यलेख (सॉफ्टवेयर और वेबजीएल / हार्डवेयर त्वरित संस्करण), छायांकन, कण, चमड़ी एनीमेशन (मुझे लगता है), और प्रकाश प्रभाव शामिल हैं। इसकी जाँच करें, वह एक सुपर-प्रतिभाशाली साथी है।

मुझे जोड़ना चाहिए कि आपको सबसे अधिक डेमो देखने के लिए नवीनतम Google Chrome या समकक्ष की आवश्यकता है, मेरा पसंदीदा में से एक है: http://mrdoob.github.com/three.js/examples/webgl_materials_sars.html


1
यह डेमो वास्तव में और भी बेहतर है: carvisualizer.plus360degrees.com/threejs
पियरे हेनरी

13

काइनेटिकज एक उच्च और आने वाली लाइब्रेरी है जो उच्च प्रदर्शन के लिए कैनवास पर व्यक्तिगत "परतों" को बनाने और एनिमेशन करने का दावा करती है।

http://www.kineticjs.com/


github.com/ericdrowell/KineticJS/#mothballed का कहना है कि " मैं अब इस रेपो या आधिकारिक काइनेटिक जेएस वेबसाइट को बनाए नहीं रखूंगा क्योंकि मैं अन्य उपक्रमों और परियोजनाओं पर चला गया हूं " और
गीथहब

8

CAKE.js अब बनाए नहीं रखा जा रहा है लेकिन एक काफी शक्तिशाली रूपरेखा है - http://code.google.com/p/cakejs/

यहां डेमो करें - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html


2
बहुत बढ़िया। बहुत परिष्कृत लगता है। और OS की दुनिया में, आप सक्रिय रूप से बनाए रखने से केवल 1 उत्साही दूर हैं :)
टोबी हैड

6

प्रोसेसिंगजेज फ्रेमवर्क पर एक नज़र डालें । इसके अलावा आगामी mootools संस्करण 2.0 में कैनवास के साथ काम करने के लिए कला प्रॉजेक्ट है


3
प्रसंस्करणजैस समस्या के लिए एक दिलचस्प दृष्टिकोण है, लेकिन यह अनिवार्य रूप से जावास्क्रिप्ट में कार्यान्वित एक प्रक्रियात्मक डीएसएल है, यह सुनिश्चित नहीं है कि यह गैर-तुच्छ अनुप्रयोगों में पैमाने पर हो सकता है। MooTools विकल्प की जाँच करेगा।
टोबी हैड

हाँ, प्रोसेसिंग एक डेटा अर्थात प्रोटोटाइप भाषा है। तथ्य यह है कि एक जावास्क्रिप्ट पोर्ट साफ-सुथरा है, लेकिन यह मुश्किल से इसे HTML 5 फ्रेमवर्क बनाता है।
पीटर बेली 15

सवाल एचटीएमएल 5 नहीं एक कैनवास फ्रेमवर्क के बारे में था, और व्हाट्स व्हाट्सएप प्रोसेसिंगजेएस है।
एंड्रियास कोबर्ले

मेरी शब्दार्थ त्रुटि को क्षमा करें। कैनवास का ढांचा वही है जो मुझे मिल रहा था।
पीटर बेली

6

राफेल एक बहुत अच्छा कैनवास पुस्तकालय लगता है; यह एसवीजी-आधारित (या इंटरनेट एक्सप्लोरर में वीएमएल-आधारित) है, और इस प्रकार बहुत से उपयोगकर्ता इनपुट घटनाओं का समर्थन करता है। यह काफी छोटा है (60kb gzipped), इसलिए बहुत बड़ी निर्भरता नहीं है।
ऐसा लगता है कि एक अच्छा ख़ासा भी है: http://raphaeljs.com/reference.html#animate ( उदाहरण के लिए यहां और यहां देखें )।

उदाहरण के लिए, यह क्या कर सकता है, इस चतुर छोटे डेमो पर एक नज़र डालें ।

उम्मीद है की यह मदद करेगा!


10
SVG कैनवास के समान नहीं है, हालांकि
Toby Hede

4

मैंने दो पुस्तकालयों को अत्यंत प्रतिस्पर्धी और बहुत बेहतर फिर कपड़े के रूप में पाया है।

Kinetic.js और easel.js दोनों में बहुत अच्छी घटना से निपटने, समूहीकरण और सामान्य आकार का अमूर्त है। आपको इन दोनों में बहुत प्यार मिलेगा; चित्रफलक अधिक छवि उन्मुख और फ़िल्टरिंग लगता है।

फैब्रिक का इवेंट हैंडलाइन इन दोनों में से बहुत खराब है - मूल रूप से यह पूरे कैनवास को एक बड़े ईवेंट रैपर के रूप में मानता है और आपको बताता है कि "कुछ" पर कब क्लिक किया गया है। यह घटनाओं को अलग-अलग आकृतियों या आकृतियों के समूहों से नहीं जोड़ता है।


2
एफडब्ल्यूआईडब्ल्यू, फैब्रिक अब आपको घटनाओं को सीधे ऑब्जेक्ट में संलग्न करने की अनुमति देता है और सामान्य समूह कार्यक्षमता है।
कंगैक्स

3

एक दिलचस्प पुस्तकालय है, जिसका उद्देश्य डेविड फ्लानाग द्वारा जावास्क्रिप्ट कैन्वस नामक कैनवास एपीआई के साथ काम करने के कुछ मूल सिद्धांतों को बेहतर बनाना है : जावास्क्रिप्ट गाइड के लेखक : द डेफिनिटिव गाइड


एक फ्रेमवर्क के लिए एक उपयोगी नींव हो सकती है जो उच्च-स्तरीय सामान को संभालती है।
टॉबी हैड

3

इसके अलावा, युवा, लेकिन खराब नहीं, जावास्क्रिप्ट फ्रेमवर्क, और यह (जटिल एनीमेशन, दृश्य रेखांकन का प्रबंधन, घटनाओं और उपयोगकर्ता इंटरैक्शन को संभालना) इसके बारे में - jCanvaScript । हो सकता है, graph मैनेजिंग सीन ग्राफ्स ’को छोड़कर।


3

ग्राफ और मूविंग साइट हेडर का उत्पादन करने के लिए bHive के साथ काम करना, प्रभावशाली और शक्तिशाली लगता है, दूसरों के विपरीत विकसित होना प्रतीत होता है। एडोब एज भी एक कैंडर के लायक है, हालांकि कैनवस को सख्ती से नहीं।

http://www.bhivecanvas.com

तथा

http://labs.adobe.com/technologies/edge/


2

एवीएस इंजन वास्तव में बहुत अच्छा है: http://www.dextrose.com/en/projects/aves-engine

इसके अलावा, अकिहबारा अच्छा लगता है: http://www.kesiev.com/akihabara/


Aves अप्रकाशित है और जाहिरा तौर पर कैनवास का उपयोग नहीं करता है। सुंदर प्रभावशाली डेमो हालांकि।
टोबी हैड

Aves कैनवास का उपयोग बिल्कुल नहीं करता है, इस पर एक नज़र डालें: paulbakaus.com/2010/07/19/…
alcuadrado

2

यदि आप जावास्क्रिप्ट का उपयोग करना चाहते हैं, तो Dojo जाने का एक शानदार तरीका है। इसमें एक कॉम्पैक्ट, क्रॉस-प्लेटफॉर्म (एसवीजी, वीएमएल, कैनवस, सिल्वरलाइट) वेक्टर ग्राफिक्स एपीआई है जो बहुत शक्तिशाली है। आप इसे dojo.gfx और dojox.gfx में पा सकते हैं।

हमने एक इंटरैक्टिव भौतिकी ट्यूटर बनाने के लिए इसका उपयोग किया है जो छात्रों को वैक्टर, दीर्घवृत्त, आदि (यहां तक ​​कि छवियों को जोड़ते हैं) आकर्षित करने और उन पर सभी प्रकार के परिवर्तनों को करने की अनुमति देता है। आप देख सकते हैं कि हमने क्या किया है http://gideon.eas.asu.edu/web-UI/login.html - किसी भी उपयोगकर्ता नाम के साथ लॉग इन करें।

मैंने fabric.js और dojox पर एक नज़र डाली है। यह एक ही चीज़ का एक बहुत कुछ करता है। यदि आप टूलकिट में परीक्षणों को देखते हैं (एक बार जब आप इसे अपना डोजोक्स / ड्राइंग / परीक्षण / / प्राप्त कर लेते हैं) तो आपको वेक्टर ग्राफिक्स से लेकर छवियों तक, प्रोग्रामेटिक रूप से बनाए गए छाया में हर चीज के उदाहरण मिलते हैं।


1

मैं एक खेल इंजन के रूप में अकिहबारा से प्रभावित हूं। यह ट्यूटोरियल और एक एपीआई के रूप में शानदार प्रलेखन है। मैं भी कुछ संदेश बोर्डों पर akihabara 2 रिलीज की बात करते देखा है। दुर्भाग्य से, यह सब बात एक वर्ष या उससे अधिक पुरानी है। मुझे वास्तव में उम्मीद है कि यह इंजन अभी भी विकसित किया जा रहा है।


1

मैंने अभी-अभी AS3 / Flash डेवलपमेंट बैकग्राउंड वाले लोगों की ओर आकर्षित एक नई ड्राइंग एंड ट्वीनिंग लाइब्रेरी का पहला पुनरावृत्ति जारी किया है। हालांकि मेरा काम अभी तक जटिल ड्राइंग पथों या रेखांकन का समर्थन नहीं करता है, लेकिन मुझे लगता है कि मैं उम्मीद कर रहा हूं कि यह लोगों को एक परिचित तरीके से बुनियादी प्राथमिकताओं को जल्दी से तैयार करने में मदद करेगा।

प्रतिक्रिया और टिप्पणियों का स्वागत है। http://www.quietless.com/kitchen/introducing-js3/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.