हैलो प्रिय Habroyuzery! अपनी पहली पोस्ट में, मैं एचटीएमएल 5 कैनवस के रूप में या संदर्भ कार्यों के बारे में इस तरह के एक अद्भुत और दिलचस्प बात के बारे में बात करना चाहूंगा, जो मेरी राय में कम से कम कवर - रूपांतरित और घूमने वाले हैं।
जब मैंने अपने प्रयोगों की शुरुआत की और न्यूफ़ंगल कैनवास के क्षेत्र में खुदाई की, तो रननेट में केवल एक लेख था जिसमें
स्पष्ट रूप से बताया गया था कि कैनवास पर चित्र कैसे घुमाए जा सकते हैं। अधिक या कम रहस्यमय जावा स्क्रिप्ट के अर्थ को समझने के लिए, मैं केवल तुलुलू एचटीएमएल 5 गेम मेकर के स्रोतों को "चमक" करने में सक्षम था।
तो, परिचय समाप्त होने के साथ, चलिए शुरू करते हैं। और हम शुरू करेंगे, शायद, रोटेशन के साथ ...
घुमाएँ ()
यह फ़ंक्शन रेडियंस में एकमात्र तर्क के रूप में एक कोण लेता है। इस पद्धति को निष्पादित करने के बाद जो कुछ भी तैयार किया गया
है वह मूल के सापेक्ष दिए गए कोण द्वारा घुमाया जाएगा। कि स्पष्ट है? नहीं? खराब ... आइए स्थिति को एक विशिष्ट उदाहरण के साथ देखें: हमें दिए गए निर्देशांक में दिए गए आकार की एक आयत को आकर्षित करने की आवश्यकता है, और आकृति को एक दिए गए कोण द्वारा फिर से अपनी धुरी के चारों ओर घुमाया जाना चाहिए।
इस कोड के साथ शुरू करते हैं:
function inRad(num) {
यहाँ परिणाम है:
उम्मीदों पर खरा नहीं उतरा, है ना? और क्यों? लेकिन क्योंकि: "इस पद्धति के लागू होने के बाद जो कुछ भी तैयार
किया गया है, वह मूल के सापेक्ष एक पूर्व निर्धारित कोण पर घुमाया जाएगा
, " और उस कार्य की स्थिति के अनुसार जिसकी आपको आवश्यकता है: "आंकड़ा
अपनी धुरी के चारों ओर घुमाया जाना चाहिए।" निष्कर्ष - आपको उस बिंदु को बदलने की आवश्यकता है जिसके चारों ओर रोटेशन होगा, या मूल का बिंदु। यह कुछ अराजक लगता है, क्योंकि हम सभी इस तथ्य के अभ्यस्त हैं कि (0; 0) ऊपरी बाएं कोने में है ... इसलिए हम अपने लेख के अगले पैराग्राफ पर आते हैं।
अनुवाद ()
मुझे उम्मीद है कि हर कोई पहले से ही इस तथ्य के साथ पकड़ा गया है कि अनुवाद मूल बिंदु की स्थिति को बदल देता है, यदि नहीं, तो मैं कहता हूं - अनुवाद मूल बिंदु की स्थिति को बदल देता है :), वह बिंदु, जिसके चारों ओर इस मामले में रोटेशन होता है। मैं लंबे समय तक पीड़ा नहीं दूंगा - मैं हमारे असाइनमेंट के लिए सही कोड पोस्ट करता हूं:
function inRad(num) { return num * Math.PI / 180; } var rectX = 100, rectY = 100, rectW = 100, rectH = 100, rectAngle = 45; var cnv = document.getElementById('canvas'); var ctx = cnv.getContext('2d'); ctx.fillStyle = '#8080FF'; ctx.fillRect(0, 0, 300, 300); ctx.translate(rectX, rectY); ctx.rotate(inRad(45)); ctx.fillStyle = '#804000'; ctx.fillRect(-rectW/2, -rectH/2, rectW, rectH);
FillRect में किस तरह के अजीब तर्क हैं? और यह आपके मन के लिए भोजन है :)
स्क्रिप्ट को सहेजें, index.html पर डबल-क्लिक करें और हाँ! पीड़ा का परिणाम:
मुझे उम्मीद है कि कम से कम कोई इस रहस्यमय कैनवास पर लेख को सभी परिणामों के साथ प्रकाश में लाने में मदद करेगा।
पुनश्च: अगला पाठ (एस) गहराई से छंटाई के साथ एक सामान्य स्प्राइट इंजन के निर्माण के लिए समर्पित करने का इरादा रखता है। क्या यह लिखने लायक है? पढ़ें कौन होगा?जारी रखा जाए ।