HTML canvas setTransform() विधि

HTML5 Canvas संदर्भ पुस्तिका

परिभाषा और उपयोग

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

setTransform() विधि वर्तमान ट्रांसफॉर्मेशन मैट्रिक्स को इकाई मैट्रिक्स को रीसेट करती है और उसी पैरामीटरों के साथ फिर से चलाती है transform().

अन्य रूप से, setTransform() आपको वर्तमान इनवायरन्मेंट को जगह करने, घुमाने, फैलाने और टेक्स्ट को झुकाने की अनुमति देता है。

टिप्पणी:यह ट्रांसफॉर्मेशन केवल setTransform() विधि को बुलाने के बाद के ड्राइंग पर प्रभाव डालता है。

उदाहरण

एक चतुर्भुज को आरेखित करें, setTransform() के द्वारा पुन: रीसेट और नई ट्रांसफॉर्मेशन मैट्रिक्स बनाएं, फिर फिर चतुर्भुज को आरेखित करें, पुन: रीसेट और नई ट्रांसफॉर्मेशन मैट्रिक्स बनाएं, फिर फिर चतुर्भुज को आरेखित करें। ध्यान दें कि जब भी आप setTransform() को बुला देते हैं, वह पिछली ट्रांसफॉर्मेशन मैट्रिक्स को रीसेट करता है और नई मैट्रिक्स को बनाता है, इसलिए नीचे के उदाहरण में लाल चतुर्भुज दिखाया नहीं जाता है क्योंकि वह नीले चतुर्भुज के नीचे है:

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

JavaScript:

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 ऊर्ध्वगामी गतिशील चित्रकारी

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

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

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 संदर्भ पुस्तिका