طريقة Canvas setTransform()
التعريف والاستخدام
كل عنصر على الورق يمتلك مصفوفة تحول حالية.
تعيين تحويل يعيد تعيين مصفوفة التحول الحالية إلى مصفوفة وحدة، ثم يجري بنفس المعلمات تحويل.
بمعنى آخر، يسمح لك setTransform() بتكبير، وتدوير، وتحريك، وتمييز البيئة الحالية.
ملاحظة:سيؤثر هذا التحول فقط على الرسم بعد استدعاء setTransform().
مثال
رسم مستطيل، من خلال إعادة تعيين وتوليد مصفوفة التحول الجديدة باستخدام setTransform()، ثم رسم المستطيل مرة أخرى، وإعادة تعيين وتوليد مصفوفة التحول الجديدة، ثم رسم المستطيل مرة أخرى. يرجى ملاحظة أن المستطيل الأحمر لن يظهر في هذا المثال لأنه تحت المستطيل الأزرق:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
النحو
context.setTransform(a,b,c,d,e,f);
قيمة المعلمات
| المعلمات | الوصف |
|---|---|
| a | التصيير الدائري الأفقي |
| b | التصيير المائل الأفقي |
| c | التصيير المائل العمودي |
| d | التصيير العمودي |
| e | رسم الحركة الأفقية |
| f | رسم الحركة العمودية |
دعم المتصفحات
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بشكل كامل لأول مرة.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ملاحظة:Internet Explorer 8 وأحدث إصداراته لا يدعم عنصر <canvas>.
