Canvas transform() পদ্ধতি
সংজ্ঞা ও ব্যবহার
ক্যানভাসের প্রত্যেক বস্তুকেই একটি বর্তমান পরিবর্তন ম্যাট্রিক্স থাকে。
transform() পদ্ধতি বর্তমান পরিবর্তন ম্যাট্রিক্সকে প্রতিস্থাপন করে। এটা নিচে বর্ণিত ম্যাট্রিক্স দ্বারা বর্তমান পরিবর্তন ম্যাট্রিক্সকে অপারেট করে:
a c e b d f 0 0 1
অর্থাৎ, transform() পরিবর্তন ম্যাট্রিক্সটি সম্পর্কে আপনাকে সমস্ত কাজ করতে দেয়, যেমন ক্ষুদ্রীকরণ, ঘূর্ণন, সরণ এবং স্ক্রুয়েন্স
মন্তব্য:এই পরিবর্তনটি মাত্র transform() মেথড কলের পরের চিত্র নির্মাণকেই প্রভাবিত করবে。
মন্তব্য:transform() মেথডের আচরণ উপরোক্ত rotate()、scale()、translate() বা transform() দ্বারা করা অন্যান্য পরিবর্তন। উদাহরণস্বরূপ: যদি আপনি প্রক্রিয়াটিকে দ্বিগুণ করেছেন, তবে transform() মেথড প্রক্রিয়াটিকে দ্বিগুণ করবে, এবং আপনার প্রক্রিয়াটি চারগুণ করা হবে।
সুঝাওয়া:দেখুন setTransform() পদ্ধতি যা অন্যান্য পরিবর্তনের প্রতি প্রতিক্রিয়া দেয় না。
উদাহরণ
একটি চতুর্ভুজ আঁকুন; transform() মেথড দ্বারা একটি নতুন পরিবর্তন ম্যাট্রিক্স যোগ করে আবার চতুর্ভুজ আঁকুন; একটি নতুন পরিবর্তন ম্যাট্রিক্স যোগ করে আবার চতুর্ভুজ আঁকুন। লক্ষ্য করুন যে, প্রত্যেকবার আপনি transform() কল করেন তখন, তা পূর্ববর্তী পরিবর্তন ম্যাট্রিক্সের উপর নির্মিত হয়:
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> ইলেকট্রন সমর্থন করে না。
