طريقة 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>.
