روش 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);
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه‌ای اولیه از مرورگرها هستند که این ویژگی را کامل پشتیبانی می‌کنند.
| کروم | آندژی | افرادا | سافاری | اپرا |
|---|---|---|---|---|
| کروم | آندژی | افرادا | سافاری | اپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
توجه:اینترنت اکسپلورر 8 و نسخه‌های قبلی از عنصر <canvas> پشتیبانی نمی‌کنند.
