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