أسلوب تحويل قماش HTML ()
مثال
ارسم مستطيلاً ، وأضف مصفوفة تحويل جديدة مع التحويل () ، ثم ارسم المستطيل مرة أخرى ، وأضف مصفوفة تحويل جديدة ، ثم ارسم المستطيل مرة أخرى. لاحظ أنه في كل مرة تستدعي فيها التحويل () ، فإنها تعتمد على مصفوفة التحويل السابقة:
جافا سكريبت:
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);
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
التعريف والاستخدام
يحتوي كل كائن على اللوحة القماشية على مصفوفة تحويل حالية.
تحل طريقة التحويل () محل مصفوفة التحويل الحالية. يضاعف مصفوفة التحويل الحالية بالمصفوفة الموصوفة بواسطة:
| أ | ج | ه |
| ب | د | F |
| 0 | 0 | 1 |
بمعنى آخر ، تتيح لك طريقة التحويل () قياس السياق الحالي وتدويره وتحريكه وإمالته.
ملاحظة: سيؤثر التحويل فقط على الرسومات التي تم إجراؤها بعد استدعاء طريقة التحويل ().
ملاحظة: تتصرف طريقة التحويل () بشكل نسبي مع عمليات التحويل الأخرى التي يتم إجراؤها بواسطة rotate () أو scale () أو translate () أو transform (). مثال: إذا كنت قد قمت بالفعل بضبط الرسم على مقياس بمقدار اثنين ، وقياس طريقة التحويل () بقياس رسوماتك بمقدار اثنين ، فسيتم قياس رسوماتك الآن بمقدار أربعة.
نصيحة: تحقق من طريقة setTransform () ، والتي لا تتصرف بشكل نسبي مع التحويلات الأخرى.
| بناء جملة JavaScript: | السياق التحويل ( أ ، ب ، ج ، د ، هـ ، و ) ؛ |
|---|
قيمه المعامل
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | |
| b | Skew the the drawing horizontally | |
| c | Skew the the drawing vertically | |
| d | Scales the drawing vertically | |
| e | Moves the the drawing horizontally | |
| f | Moves the the drawing vertically |
❮ كائن قماش