التوصيات الدراسية
طريقة Canvas translate()
التعريف والاستخدام translate()
ملاحظة:طريقة لتحويل موقع (0,0) على الرسم البياني. عندما تُستخدم مثل fillRect() x وغيرها من الطرق، سيتم إضافة القيمة إلى y قيمة المحور.
مثال
رسم مستطيل في موقع (10,10) وقم بإعادة تعيين موقع (0,0) الجديد إلى (70,70). أرسم مستطيلًا جديدًا مرة أخرى (لاحظ الآن يبدأ المستطيل من موقع (80,80)):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
اللغة
context.translate(x,y);
قيمة المعلمة
| المعلمة | وصف |
|---|---|
| x | قيمة إضافة إلى المحور الأفقي (x). |
| y | قيمة إضافة إلى المحور العمودي (y). |
دعم المتصفحات
الرقم في الجدول يوضح إصدار أولي يدعم هذا الخصائص.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ملاحظة:Internet Explorer 8 وأقدم إصداراته لا تدعم عنصر <canvas>.
