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