مثال
رسم مستطيل، إعادة تعيين وإنشاء مصفوفة التحويل الجديدة مع 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);
انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
كل كائن على القماش يحتوي على مصفوفة التحويل الحالية.
و setTransform() إعادة تعيين طريقة تحويل التيار إلى مصفوفة الوحدة، ومن ثم يعمل transform() مع نفس الحجج.
وبعبارة أخرى، فإن setTransform() أسلوب يتيح لك توسيع نطاق، تدوير، والتحرك، وتحرف السياق الحالي.
Note: إن التحول تؤثر فقط على الرسوم التي تتم بعد استدعاء الأسلوب setTransform.
| جافا سكريبت بناء الجملة: | context . setTransform( a,b,c,d,e,f ) . |
|---|
قيم معلمة
| معامل | وصف | العبها |
|---|---|---|
| a | جداول الرسوم أفقيا | العبها " |
| b | يشوه رسومات أفقيا | العبها " |
| c | يشوه رسومات عموديا | العبها " |
| d | جداول الرسوم عموديا | العبها " |
| e | يحرك الرسوم أفقيا | العبها " |
| f | يحرك الرسوم عموديا | العبها " |
<كائن قماش