Canvas setTransform() विधा
परिभाषा और उपयोग
कैनवस पर हर वस्तु के पास एक वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स होता है。
setTransform() विधा वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स को एक इकाई मैट्रिक्स के रूप में पुन: सेट करती है और उसी पैरामीटरों के साथ setTransform() को चलाती है transform().
अन्य रूप से, setTransform() आपको वर्तमान परिवेश को विस्तारित, घुमाना, स्थानांतरित और टिकाना करने की अनुमति देता है。
टिप्पणी:यह ट्रांसफॉर्मेशन केवल setTransform() विधा के बाद के ड्राइंग को प्रभावित करता है。
उदाहरण
एक चतुर्भुज को दूरबीन से setTransform() के द्वारा पुन: सेट करके और नए ट्रांसफॉर्मेशन मैट्रिक्स को बनाकर फिर से चतुर्भुज को दूरबीन से ड्राइंग करें, फिर से setTransform() को बुलाकर पुन: सेट करें और फिर एक बार फिर चतुर्भुज को ड्राइंग करें। ध्यान दें कि प्रत्येक बार setTransform() को बुलाते समय यह पिछले ट्रांसफॉर्मेशन मैट्रिक्स को पुन: सेट करता है और नए मैट्रिक्स को बनाता है, इसलिए नीचे के उदाहरण में लाल चतुर्भुज दिखाया नहीं जाता क्योंकि यह नीले चतुर्भुज के नीचे है:
जेसक्रिप्ट:
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);
व्याकरण
context.setTransform(a,b,c,d,e,f);
पैरामीटर मूल्य
| पैरामीटर | वर्णन |
|---|---|
| a | स्थानांतरी घुमाना ड्राइंग |
| b | स्थानांतरी टिकाना ड्राइंग |
| c | अड़ानी टिकाना ड्राइंग |
| d | अड़ानी तुलना ड्राइंग |
| e | स्थिर गति के साथ ड्राइंग |
| f | ऊर्ध्व गति के साथ ड्राइंग |
ब्राउज़र समर्थन
तालिका में दिए गए नंबरों को इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण निर्दिष्ट करते हैं।
| च्रोम | एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| च्रोम | एज | फायरफॉक्स | सफारी | ओपेरा |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
टिप्पणी:Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。
