HTML canvas scale() পদ্ধতি
সংজ্ঞা ও ব্যবহার
scale() চলতি ড্রাইটিংয়ের সমস্তুকীকরণ করার পদ্ধতি, বড় কিংবা ছোট করুন。
মন্তব্য:যদি আপনি ড্রাইটিংয়ের সমস্তুকীকরণ করেন, তবে পরবর্তীতে আঁকা সবকিছুই সমস্তুকীকরণ হবে। স্থানান্তরও সমস্তুকীকরণ হবে। আপনি লিখতে পারেন scale(2,2)তারপর ড্রাইটিংয়ের স্থান কার্ট ডানদিকের উপরের কোণ থেকে দ্বিগুণ দূরত্বে হবে।
প্রতিদর্শন
উদাহরণ 1
একটি চতুর্ভুজ আঁকুন, 200% সমস্তুকীকরণ করুন এবং পরে আরও একটি চতুর্ভুজ আঁকুন:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
সুঝানা:পাতার নিচের দিকে আরও উদাহরণ পাবেন।
ব্যবহার পদ্ধতি
context.scale(scalewidth,scaleheight);
প্রমাণের মান
| প্রমাণ | বর্ণনা |
|---|---|
| scalewidth | চলতি ড্রাইটিংয়ের প্রশস্ততা সমস্তুকীকরণ (1=100%, 0.5=50%, 2=200%, আরও এমনকি)। |
| scaleheight | চলতি ড্রাইটিংয়ের উচ্চতা সমস্তুকীকরণ (1=100%, 0.5=50%, 2=200%, আরও এমনকি)। |
আরও উদাহরণ
উদাহরণ 2
একটি চতুর্ভুজ আঁকুন; 200% একসূত্রে পুনরায় চতুর্ভুজ আঁকুন; 200% একসূত্রে পুনরায় চতুর্ভুজ আঁকুন; 200% একসূত্রে পুনরায় চতুর্ভুজ আঁকুন:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ব্রাউজার সমর্থন
সারণীতে সংখ্যা প্রথম এই বৈশিষ্ট্যটি সম্পূর্ণভাবে সমর্থনকারী ব্রাউজারের সংস্করণটি উল্লেখ করা হয়েছে。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> এলিমেন্টটির সমর্থন করে না。
