मैं कुछ काफी तीव्र जावास्क्रिप्ट/कैनवास उपयोग के साथ वेबसाइट बनाने के बारे में सोच रहा हूं और मैं Processing.js पर देख रहा हूं और ऐसा लगता है कि यह कैनवास को काफी आसान बना देगा। क्या किसी को कोई कारण पता है कि क्यों मैं प्रसंस्करण.जेएस का उपयोग नहीं करना चाहिए? मैं समझता हूं कि पुराने ब्राउज़र इसका उपयोग करने में सक्षम नहीं होंगे, लेकिन अभी यह ठीक है।क्या जॉन रेसिग की प्रोसेसिंग.जेएस का उपयोग करना उचित है?
जैसा कि बताया गया है, IE को Processing.js (IE8 बीटा सहित) द्वारा समर्थित नहीं है। मैंने प्रोसेस.जेएस को प्रदर्शन के मामले में थोड़ा धीमा होने के लिए भी पाया है, केवल कैनवास का उपयोग करने की तुलना में (विशेष रूप से यदि आप जावास्क्रिप्ट एपीआई का उपयोग करने के बजाय प्रसंस्करण भाषा के साथ एक स्ट्रिंग को पार्स कर रहे हैं)।
मैं प्रोसेसिंग रैपर पर व्यक्तिगत रूप से कैनवास एपीआई पसंद करता हूं, क्योंकि यह मुझे अधिक नियंत्रण देता है।
प्रसंस्करण लाइन() फ़ंक्शन इस तरह कार्यान्वित किया जाता है (लगभग): उदाहरण के लिए:
function line (x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();
};
और तुम इस तरह इसका इस्तेमाल चाहते हैं (आप जावास्क्रिप्ट-सामने आ एपीआई का उपयोग कर रहे हैं यह सोचते हैं):
var p = Processing("canvas")
p.stroke(255)
////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////
सूचना हर पंक्ति() कॉल काफी प्रदर्शन में सुधार खोलने के लिए और एक नया मार्ग बंद करने के लिए है, जबकि कैनवास एपीआई के साथ आप एक ही beginPath/endPath ब्लॉक के भीतर सभी लाइनों आकर्षित कर सकते हैं कि:
context.strokeStyle = "#fff";
context.beginPath();
////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///
context.closePath();
context.stroke();
यदि आप इसके साथ ठीक हैं आईई 7 में काम नहीं कर रहे हैं, तो इसके लिए जाएं। मैंने इसे फ़ायरफ़ॉक्स 3 में काम किया है। यह आपके पृष्ठ पर सिल्वरलाइट/फ्लैश प्रभाव लाने का एक आसान तरीका है।
मेरा झुकाव यह है कि प्रसंस्करण.जे जैसे पुस्तकालयों को तेजी से ट्रैक पथ पर बदल दिया जाएगा या अपग्रेड किया जाएगा, इसलिए जब वे करते हैं और नई सुविधाओं के साथ बने रहें तो दौड़ने के लिए तैयार हो जाएं।
मैं इसके बजाय फ्लैश का उपयोग कहूंगा। प्रसंस्करण.जेएस के साथ काम करने वाले ब्राउज़रों की संख्या की तुलना में अधिक ब्राउज़रों में फ़्लैश स्थापित है। इसके अलावा, आपको जावास्क्रिप्ट का उपयोग करके फ्लैश बनाम बेहतर प्रदर्शन मिलेगा (कम से कम अभी के लिए, हालांकि जेएस को बहुत तेज़ करने के लिए कामों में परियोजनाएं हैं, लेकिन यह अभी भी थोड़ा सा तरीका है)
आदर्श रूप से फ्लैश, सिल्वरलाइट, एट अल सभी को डीओएम सामग्री और कार्यक्षमता में मानकीकृत (कम से कम डी-फैक्टो) द्वारा मार डाला जाना चाहिए। –
यह ' अपने कैनवास पर ड्राइंग को सरल बनाओ। यदि आप कैनवास का उपयोग कर रहे हैं तो यह एनीमेशन के कार्य को सरल बनाता है। यदि आप एनीमेशन कर रहे हैं और आपको पूर्ण ब्राउज़र समर्थन की परवाह नहीं है तो प्रसंस्करण.जेएस का उपयोग करें। यदि आप एनीमेशन नहीं कर रहे हैं (यदि आप उदाहरण के लिए चार्टिंग या गोलाकार कोनों कर रहे हैं) तो प्रसंस्करण.जेएस के ओवरहेड को न जोड़ें।
किसी भी तरह से, मैं अनुशंसा करता हूं कि आप सीधे कैनवास एपीआई का उपयोग कैसे करें सीखें। कैनवास एपीआई को समझना, विशेष रूप से परिवर्तन, यदि आप प्रसंस्करण.जेएस का उपयोग कर रहे हैं तो भी आपको बहुत मदद मिलेगी।
प्रयास करें नई जावास्क्रिप्ट कार्यान्वयन p5js p5js.org
ओह और लियो के जवाब के जवाब में, आप वास्तव में प्रसंस्करण या p5js में लाइन फ़ंक्शन का उपयोग करने की जरूरत नहीं है, वहाँ अलग beingShape और हैं bePath कैनवास एपीआई के समान कार्य करता है।
क्या आपने [Fabric.js] (http://fabricjs.com) जैसे शुद्ध जावास्क्रिप्ट कैनवास पुस्तकालयों को देखा है? – kangax