Rough.js कैनवस और एसवीजी के साथ हैंड-ड्रॉ ग्राफिक्स बनाता है
यह देखना आश्चर्यजनक है कि वेब कितनी दूर के साथ आया है गतिशील तत्व जैसे कि इन-ब्राउज़र एसवीजी. आप सब कुछ डिजाइन कर सकते हैं कस्टम एनिमेशन सेवा मेरे एचटीएमएल 5 गेम सही पुस्तकालयों के साथ.
परीक्षण के लायक नवीनतम पुस्तकालयों में से एक है Rough.js. यह है मुफ्त ग्राफिक्स पीढ़ी स्क्रिप्ट वर्तमान में बीटा में है कैनवास और एसवीजी तत्वों पर काम करता है.
आप कस्टम आइकन, बार ग्राफ, बहुत कुछ भी आप सभी कोड में चाहते हैं बना सकते हैं। और, अंतिम परिणाम एक खूबसूरत हाथ से खींची गई भावना को लेता है.
इस लेखन के रूप में, Rough.js अभी भी v0.1 बीटा में है, इसलिए यह एक लाइव प्रोडक्शन वेबसाइट के लिए तैयार नहीं हो सकता है. लेकिन यह एक प्रमाण है कि वेब मानक तेजी से प्रगति कर रहे हैं और हम एक ऐसी उम्र में प्रवेश कर रहे हैं जहाँ इस तरह का सामान संभव है.
उदाहरण के लिए इसे लें प्रगति पट्टी Rough.js के माध्यम से उत्पन्न। अगर आप क्लिक करे “शुरु” बटन आप इसे नोटिस करेंगे एक कस्टम एनीमेशन चलाता है उस वास्तव में हाथ से तैयार दिखता है. यह उपयोग कर रहा है पूर्वनिर्धारित पैटर्न के साथ एसवीजी लाइनें वास्तव में प्राकृतिक लग रहा है कि एक wobbly प्रभाव बनाने के लिए.
मुख्य GitHub पृष्ठ पर, आपको एक अनुभाग सूची मिलेगी कार्रवाई में Rough.js के कई उदाहरण.
ये सभी कोड नमूने के साथ आते हैं और होना चाहिए किसी भी वेबसाइट के लिए फिर से काम करना बहुत आसान है. आप सभी की जरूरत है Rough.js स्क्रिप्ट फ़ाइल और जावास्क्रिप्ट के साथ गड़बड़ करने के लिए कुछ धैर्य है.
यहाँ एक है नमूना स्निपेट प्रदर्शन कैसे करना है कोड में एक आयत बनाएँ:
var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); खुरदरापन (१०, १०, २००, २००); // x, y, चौड़ाई, ऊंचाई एक बार जब आप कोड को समझ लेते हैं तो बहुत सरल होते हैं, लेकिन शायद शुरुआती लोगों के लिए सबसे सहज स्क्रिप्ट नहीं होती है.
यदि आप अधिक कोड स्निपेट और नमूना डेमो चाहते हैं Rough.js होमपेज देखें. यह सीखने की शुरुआत करने और कोड स्निपेट खोजने के लिए सही जगह है जिसे आप पुनः काम में ले सकते हैं.
इसके अलावा, यदि आपके पास अतिरिक्त सुविधाओं के लिए प्रश्न या सुझाव हैं, तो आप ट्विटर @ Rreet.js पर निर्माता को भेज सकते हैं.
