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