HTML कैनवास ट्रांसफ़ॉर्म () विधि
उदाहरण
एक आयत बनाएं, ट्रांसफ़ॉर्म () के साथ एक नया ट्रांसफ़ॉर्मेशन मैट्रिक्स जोड़ें, फिर से आयत बनाएं, एक नया ट्रांसफ़ॉर्मेशन मैट्रिक्स जोड़ें, फिर आयत को फिर से बनाएं। ध्यान दें कि हर बार जब आप ट्रांसफ़ॉर्म () कहते हैं, तो यह पिछले ट्रांसफ़ॉर्मेशन मैट्रिक्स पर बनता है:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
कैनवास पर प्रत्येक वस्तु में एक वर्तमान परिवर्तन मैट्रिक्स होता है।
ट्रांसफ़ॉर्म () विधि वर्तमान ट्रांसफ़ॉर्मेशन मैट्रिक्स को बदल देती है। यह द्वारा वर्णित मैट्रिक्स के साथ वर्तमान परिवर्तन मैट्रिक्स को गुणा करता है:
| ए | सी | इ |
| बी | डी | एफ |
| 0 | 0 | 1 |
दूसरे शब्दों में, ट्रांसफॉर्म () विधि आपको वर्तमान संदर्भ को स्केल करने, घुमाने, स्थानांतरित करने और तिरछा करने देती है।
नोट: परिवर्तन केवल परिवर्तन () विधि को कॉल करने के बाद किए गए चित्रों को प्रभावित करेगा।
नोट: ट्रांसफ़ॉर्म () विधि रोटेट (), स्केल (), ट्रांसलेशन (), या ट्रांसफ़ॉर्म () द्वारा किए गए अन्य परिवर्तनों के लिए अपेक्षाकृत व्यवहार करती है। उदाहरण: यदि आपने पहले से ही अपनी ड्राइंग को दो से स्केल करने के लिए सेट किया है, और ट्रांसफ़ॉर्म () विधि आपके ड्रॉइंग को दो से स्केल करती है, तो आपके ड्रॉइंग को अब चार से स्केल किया जाएगा।
युक्ति: सेटट्रांसफॉर्म () विधि देखें, जो अन्य परिवर्तनों के लिए अपेक्षाकृत व्यवहार नहीं करती है।
| जावास्क्रिप्ट सिंटैक्स: | संदर्भ । परिवर्तन ( ए, बी, सी, डी, ई, एफ ); |
|---|
पैरामीटर मान
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML कैनवास संदर्भ