ক্যানভাস setTransform() মেথড

সংজ্ঞা ও ব্যবহার

ক্যানভাসের প্রত্যেক বস্তুকেই একটি বর্তমান রূপান্তর ম্যাট্রিক্স থাকে

setTransform() মেথডটি বর্তমান রূপান্তর ম্যাট্রিক্সকে ইউনিট ম্যাট্রিক্সতে পুনরায় সংজ্ঞায়িত করে, এবং একই পারামিটারের সঙ্গে পুনরায় চালায় transform()

অর্থাৎ, setTransform() দ্বারা আপনি বর্তমান পরিবেশকে সময়বদ্ধ, রোটেশন, স্থানান্তর এবং অক্ষসাময়িক করতে পারেন。

মন্তব্য:এই রূপান্তরটি কেবল setTransform() মেথড কল পরের চিত্রকরণকেই প্রভাবিত করে。

উদাহরণ

একটি চতুর্ভুজ আঁকুন, setTransform() দ্বারা পুনরায় সংজ্ঞায়িত এবং নতুন রূপান্তর ম্যাট্রিক্স তৈরি করে, পুনরায় চতুর্ভুজ আঁকুন, পুনরায় সংজ্ঞায়িত এবং নতুন রূপান্তর ম্যাট্রিক্স তৈরি করে, এবং পরেও একবার চতুর্ভুজ আঁকুন। মনে রাখুন যে, প্রত্যেকবার setTransform() কল করার সময়, তা পূর্ববর্তী রূপান্তর ম্যাট্রিক্সকে পুনরায় সংজ্ঞায়িত করে এবং নতুন ম্যাট্রিক্সকে তৈরি করে, তাই নিচের উদাহরণে, লাল চতুর্ভুজটি দেখা যাবে না, কারণ তা নীল চতুর্ভুজের নিচে রয়েছে:

আপনার ব্রাউজার HTML5 ক্যানভাস ট্যাগটি সমর্থন করে না。

জেভাস্ক্রিপ্ট:

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,,এফ);

পারামিটার মান

পারামিটার বর্ণনা
a হোরিজন্টাল রোটেশন রেখাচিত্র।
b হোরিজন্টাল অক্ষসাময়িক রেখাচিত্র।
c ভিস্টিক্সল অক্ষসাময়িক রেখাচিত্র।
d ভিস্টিক্সল রেখাচিত্র।
হোরিজন্টাল ড্রাইভিং
এফ উপরোক্ত চিত্রটির ভিত্তিতে ভিক্টরিক্যাল ড্রাইভিং

ব্রাউজার সমর্থন

তালিকায় নম্বরগুলি এই প্রতিশব্দটির প্রথম পূর্ণাঙ্গভাবে সমর্থনকারী ব্রাউজার সংস্করণটি উল্লেখ করা

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
4.0 9.0 3.6 4.0 10.1

মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。