طريقة HTML canvas transform()
التعريف والاستخدام
كل عنصر على لوحة الرسم يمتلك مصفوفة تحويل حالية.
transform() تستبدل مصفوفة التحويل الحالية. تقوم بمعالجة مصفوفة التحويل الحالية باستخدام المصفوفة التالية:
a c e b d f 0 0 1
بعبارة أخرى، يسمح لك transform() بتكبير، وتدوير، وتحريك، وإمالة البيئة الحالية.
ملاحظة:سيؤثر هذا التحويل فقط على الرسم الذي يلي طريقة transform().
ملاحظة:سلوك طريقة transform() يتعلق بمصفوفة التحويلات التي rotate()،scale()،translate() أو تحويلات أخرى تُنجز باستخدام transform(). على سبيل المثال: إذا قمت بضبط الرسم على ضعف، فإن طريقة transform() ستضخم الرسم ضعفًا، وسيكون الرسم النهائي مكبرًا أربعة أضعاف.
نصيحة:الرجاء التحقق من setTransform() الطريقة، لن تحدث لها أي سلوك يتعلق بالتحويلات الأخرى.
مثال
يرسم دائرة；من خلال إضافة مصفوفة تحويل جديدة باستخدام transform()، أرسم دائرة أخرى؛ أضف مصفوفة تحويل جديدة ثم أرسم دائرة أخرى. يرجى ملاحظة أن كل مرة تُدعى فيها transform()، فإنها ستقوم ببناء مصفوفة تحويل جديدة على المصفوفة التحويل السابقة:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
النص
transform(context.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>.
