أسلوب setTransform () في لوحة HTML
مثال
ارسم مستطيلاً ، وأعد تعيين وإنشاء مصفوفة تحويل جديدة باستخدام setTransform () ، ثم ارسم المستطيل مرة أخرى ، وأعد تعيين مصفوفة تحويل جديدة وأنشئها ، ثم ارسم المستطيل مرة أخرى. لاحظ أنه في كل مرة تقوم فيها باستدعاء setTransform () ، تقوم بإعادة تعيين مصفوفة التحويل السابقة ثم تقوم ببناء المصفوفة الجديدة ، لذلك في المثال أدناه ، لا يظهر المستطيل الأحمر ، لأنه يقع أسفل المستطيل الأزرق:
جافا سكريبت:
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);
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
التعريف والاستخدام
يحتوي كل كائن على اللوحة القماشية على مصفوفة تحويل حالية.
طريقة setTransform () تعيد تعيين التحويل الحالي إلى مصفوفة الهوية ، ثم تقوم بتشغيل التحويل () بنفس الوسيطات.
بمعنى آخر ، تتيح لك طريقة setTransform () قياس السياق الحالي وتدويره وتحريكه وتشويهه.
ملاحظة: سيؤثر التحويل فقط على الرسومات التي تم إجراؤها بعد استدعاء طريقة setTransform.
| بناء جملة JavaScript: | السياق .setTransform ( أ ، ب ، ج ، د ، هـ ، و ) ؛ |
|---|
قيمه المعامل
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ مرجع قماش HTML