HTML कैनवस transform() फ़ंक्शन

HTML5 Canvas संदर्भ

वर्णन और उपयोग

कैनवस पर के हर वस्तु के पास एक वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स होता है。

transform() फ़ंक्शन के द्वारा वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स को प्रतिस्थापित करता है। यह नीचे वर्णित मैट्रिक्स के द्वारा वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स को परिचालित करता है:

a  c  e
b  d  f
0  0  1

अन्य रूप में, transform() फ़ंक्शन आपको वर्तमान परिवेश को स्केल, रोटेट, स्थानांतरित और टिकटूर करने की अनुमति देता है。

टिप्पणी：केवल transform() फ़ंक्शन के बाद के ड्राइंग को प्रभावित करता है。

टिप्पणी：transform() फ़ंक्शन का व्यवहार rotate()औरscale()औरtranslate() या transform() द्वारा पूर्ण अन्य ट्रांसफॉर्मेशन। उदाहरण के लिए: अगर आप ड्राइंग को दोगुना करने के लिए सेट कर चुके हैं, तो transform() फ़ंक्शन ड्राइंग को दोगुना करेगा, और आपका ड्राइंग अंततः चार गुना विस्तारित होगा。

सूचना:देखें setTransform() फ़ंक्शन, जो अन्य ट्रांसफॉर्मेशन के बारे में कोई व्यवहार नहीं करता.

उदाहरण

एक चतुर्भुज बनाएं; transform() फ़ंक्शन के द्वारा नया ट्रांसफॉर्मेशन मैट्रिक्स जोड़ें, फिर चतुर्भुज को दोबारा चित्रित करें; नया ट्रांसफॉर्मेशन मैट्रिक्स जोड़ें और फिर चतुर्भुज को दोबारा चित्रित करें। ध्यान दें कि जब भी आप transform() फ़ंक्शन को बुलाते हैं, वह पिछले ट्रांसफॉर्मेशन मैट्रिक्स पर बनाया जाता है:

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थित नहीं करता.

JavaScript:

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);

अपने आप से प्रयोग करें

व्याकरण

context.transform(a,b,c,d,e,f);

पारामीटर मूल्य

पारामीटर वर्णन
a स्थिर फलकीकरण से चित्र ड्राइंग
b स्थिर ढाल से चित्र ड्राइंग
c ऊर्ध्व ढाल से चित्र ड्राइंग
d ऊर्ध्व फलकीकरण से चित्र ड्राइंग
e स्थिर गति से चित्र ड्राइंग
f ऊर्ध्व गति से चित्र ड्राइंग

ब्राउज़र समर्थन

तालिका में उल्लिखित संख्याएं पहली बार इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र के संस्करण को सूचित करती हैं。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

टिप्पणी：Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。

HTML5 Canvas संदर्भ