طريقة scale() لـ HTML canvas
التعريف والاستخدام
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 |
نکته:اینترنت اکسپلورر 8 و نسخه‌های قبلی از عنصر <canvas> پشتیبانی نمی‌کنند.
