कैनवस transform() तरीका

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> एलीमेंट को समर्थित नहीं किया।

Canvas संदर्भ दस्तावेज