का उपयोग कर एक छवि को देखते हुए हवा प्रभाव में लहराते बनाने के लिए, मैं जैसे कि यह एक झंडा हवा में लहराते, जावास्क्रिप्ट का उपयोग करने और एक HTML5 कैनवास है विकृत किया जा रहा छवि के एक एनीमेशन बनाने की जरूरत ।एक छवि विकृत करने के लिए कैसे झंडा html5 कैनवास
बोनस: मैं भी एक PNG के रूप में इस एनीमेशन निर्यात करने में सक्षम होना चाहते हैं।
मैं एक झंडा हवा में लहराते के simple example बना लिया है। यह बदसूरत है क्योंकि मैं कैनवास भरने के लिए ध्वज खींचता हूं (ध्वज के लिए पैडिंग को छोड़ने के बजाय) और क्योंकि मैं एंटी-एलियासिंग पर कोई प्रयास नहीं करता हूं।
मैंने 3 डी छायांकन प्रदान करने का कोई भी प्रयास नहीं किया, जिससे प्रभाव में मदद मिलेगी।
मैं अपने मशीन पर क्रोम v8 में एक 320px विस्तृत ध्वज के साथ 64fps मिल सकती है। यदि आप स्वयं की गति का परीक्षण करना चाहते हैं, तो एफपीएस को लाइन 59 से 1000 पर बदलें और असम्बद्धता लाइन 63 और 82; इसके बाद यह प्रत्येक 100 फ्रेम कंसोल पर एफपीएस जानकारी आउटपुट करेगा।
यह IE8- में भी काम नहीं करेगा, यहां तक कि ExCanvas के साथ, क्योंकि वहां व्यक्तिगत पिक्सेल डेटा तक पहुंचने के लिए कोई तंत्र नहीं है।
संपादित करें: बस मज़े के लिए, मैंने नमूने को छवियों के माध्यम से लहरों को छाया करने के लिए अद्यतन किया है।
EDIT2: अधिक मज़ा के लिए, मैं ड्राइंग (कोई अधिक कतरन) ध्वज को गद्दी जोड़ा गया है और मैं एक 'निचोड़' कारक आप (के लिए झंडा बड़ा या मूल की तुलना में छोटे के दाईं ओर कर देता है कि जोड़ा परिप्रेक्ष्य)। चूंकि यह प्रदर्शन को धीमा कर देता है, इसलिए मैंने इसे a separate sample के रूप में अपलोड किया है।
यह बढ़िया है, ** + 1 ** =) –
अंत में, यहां [एक अंतिम नमूना] (http://phrogz.net/tmp/gkheadwave.html) दिखा रहा है कि यह आपके द्वारा लोड की गई छवि के साथ इसका उपयोग कैसे करें (से एक ही डोमेन) एक खींचे गए ध्वज के बजाय। डेमो के लिए – Phrogz
+1। :) मैं फिर अपना जवाब वापस ले लो। (आपका पहला "सरल उदाहरण" किसी कारण से काम नहीं करता है, अन्य दो ठीक हैं हालांकि।) – casablanca
आपको पता है कि केवल दो ब्राउज़र वास्तव में एनिमेटेड PNG का समर्थन करते हैं? –