أحدث البرامج التعليمية وتطوير الشبكة
 

HTML canvas transform() Method

<كائن قماش

مثال

رسم مستطيل، إضافة مصفوفة التحويل الجديدة مع transform() ، ورسم مستطيل مرة أخرى، إضافة مصفوفة التحويل الجديدة، ثم رسم المستطيل مرة أخرى. لاحظ أنه في كل مرة تتصل transform() ، فإنه يبني على مصفوفة التحويل السابقة:

YourbrowserdoesnotsupporttheHTML5canvastag.

جافا سكريبت:

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() 4.0 تسعة 3.6 4.0 10.1

تعريف والاستخدام

كل كائن على القماش يحتوي على مصفوفة التحويل الحالية.

و transform() طريقة محل مصفوفة التحويل الحالية. تتكاثر مصفوفة التحويل الحالية مع مصفوفة وصفها:

ا ج البريد
ب د F
0 0 1

وبعبارة أخرى، فإن transform() أسلوب يتيح لك توسيع نطاق، تدوير، والتحرك، وتحرف السياق الحالي.

Note: إن التحول تؤثر فقط على الرسوم التي تتم بعد transform() ويسمى الأسلوب.

Note: إن transform() طريقة يتصرف نسبيا إلى التحولات الأخرى التي rotate() ، scale() ، translate() ، أو transform() . مثال: إذا كنت بالفعل قد وضعت الرسم على نطاق واثنين، و transform() طريقة جداول الرسومات الخاصة بك من قبل اثنين، سوف الرسومات الخاصة بك الآن على نطاق وأربعة.

Tip: راجع setTransform() الأسلوب، الذي لا تتصرف نسبيا إلى التحولات الأخرى.

جافا سكريبت بناء الجملة: context . transform( a,b,c,d,e,f ) .

قيم معلمة

معامل وصف العبها
a الميزان الرسم أفقيا العبها "
b تحرف الرسم أفقيا العبها "
c تحرف الرسم عموديا العبها "
d الميزان الرسم عموديا العبها "
e يحرك الرسم أفقيا العبها "
f يحرك الرسم عموديا العبها "
<كائن قماش