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