HTML canvas setTransform() পদ্ধতি
বিবরণ ও ব্যবহার
ক্যানভাসের প্রত্যেক বস্তুকে একটি বর্তমান রূপান্তর ম্যাট্রিক্স থাকে
setTransform()
পদ্ধতি বর্তমান রূপান্তর ম্যাট্রিক্সকে ইউনিট ম্যাট্রিক্সে পুনরায় নিশ্চিত করে, এবং একই পারামিটার দিয়ে পুনরায় চালায় transform().
অন্যভাবে বললে, setTransform() আপনাকে সম্ভব করে দেয় যে, আপনি বর্তমান পরিবেশকে সমস্ত রূপান্তর করতে পারেন, যেমন সমস্ত্রীকরণ, ঘূর্ণন, সরণ এবং স্লাইড করা。
মন্তব্য:এই রূপান্তরটি শুধুমাত্র setTransform() পদ্ধতির কল পরের আঁকা কেবলন্তু প্রভাবিত করে。
উদাহরণ
একটি চতুর্ভুজ আঁকুন, setTransform() দ্বারা পুনরায় নিশ্চিত এবং একটি নতুন রূপান্তর ম্যাট্রিক্স তৈরি করুন, পুনরায় চতুর্ভুজ আঁকুন, পুনরায় নিশ্চিত এবং একটি নতুন রূপান্তর ম্যাট্রিক্স তৈরি করুন, এবং তারপর পুনরায় চতুর্ভুজ আঁকুন। মনে রাখুন যে, প্রত্যেকবার আপনি setTransform() কল করেন তখন, তা পূর্ববর্তী রূপান্তর ম্যাট্রিক্সকে পুনরায় নিশ্চিত করে এবং একটি নতুন ম্যাট্রিক্স তৈরি করে, তাই নিচের উদাহরণে, লাল চতুর্ভুজ দেখা যাবে না, কারণ তা নীল চতুর্ভুজের নিচে আছে:
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> ইলেকট্রন সমর্থন করে না。