طريقة تحويل لوحة Canvas
التعريف والاستخدام
كل عنصر على اللوحة يمتلك نظام تحويل حاليًا.
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);
القواعد
context.transform(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>.
