HTML canvas transform() পদ্ধতি
সংজ্ঞা ও ব্যবহার
ক্যানভাসটির প্রত্যেক বস্তুতে একটি বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্স রয়েছে。
transform() পদ্ধতি বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্সকে প্রতিস্থাপন করে। এটি নিচে বর্ণিত ম্যাট্রিক্স দ্বারা বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্সকে অপরাধীকরণ করে:
a c e b d f 0 0 1
অর্থাৎ, transform() আপনাকে মানুষদের পরিবর্তন, ঘুর্ণান্ত, সরণ এবং চুম্বকীয় করতে দেয়。
মন্তব্য:এই পরিবর্তনটি কেবলমাত্র 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 | ভিক্টিক্যাল মুভিং ড্রাইভিং |
ব্রাউজার সমর্থন
সারণীতে সংখ্যা এটি প্রথম উপযুক্ত ব্রাউজার সংস্করণকে নির্দেশ করে
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:ইন্টারনেট এক্সপ্লোরার 8 এবং এর পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。
