مетод Canvas scale()
تعریف و استفاده
scale() روش بزرگ کردن فعلی ترسیم، بزرگتر یا کوچکتر.
توجه:اگر شما ترسیم را بزرگ کنید، تمام ترسیم‌های بعدی نیز بزرگ خواهند شد. موقعیت نیز بزرگ خواهد شد. اگر شما بنویسید scale(2,2)، پس ترسیم در موقعیت دوبرابر دورتر از گوشه بالا چپ کانواس قرار می‌گیرد.
مثال
مثال ۱
مستطیل بکشید، بزرگ کنید به ۲۰۰٪، سپس مستطیل را دوباره بکشید:
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 | پهنا فعلی ترسیم را بزرگ کنید (۱=۱۰۰٪، ۰.۵=۵۰٪، ۲=۲۰۰٪ و غیره). |
| scaleheight | ارتفاع فعلی ترسیم را بزرگ کنید (۱=۱۰۰٪، ۰.۵=۵۰٪، ۲=۲۰۰٪ و غیره). |
مثال‌های بیشتر
مثال ۲
یک مستطیل بکشید؛ بزرگ کنید به ۲۰۰٪، سپس مستطیل را دوباره بکشید؛ بزرگ کنید به ۲۰۰٪، سپس مستطیل را دوباره بکشید؛ بزرگ کنید به ۲۰۰٪، سپس مستطیل را دوباره بکشید:
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 |
توجه:نسخه‌های 8 و قبل از آن از عناصر <canvas> پشتیبانی نمی‌کنند.
