Canvas transform() 方法

Canvas 参考 دستور زبان

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

a  c  e
b  d  f
0  0  1

换句话说，transform() 允许您缩放、旋转、移动并倾斜当前的环境。

تعلیمات:该变换只会影响 transform() 方法调用之后的绘图。

تعلیمات:transform() 方法的行为相对于由 rotate()、scale()、translate() 或 transform() 完成的其他变换。例如：如果您已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，您的绘图最终将放大四倍。

نکات:ملاحظہ: setTransform() طریقہ، جو دیگر تبدیلیوں کے ساتھ کسی بھی عمل کا اثر نہیں لگاتا.

مثال

ایک مستطیل نقش کریں؛ transform() کے ذریعے ایک نئی تبدیلی کا ماتریکس اضافہ کریں، مستطیل نقش کریں؛ ایک نئی تبدیلی کا ماتریکس اضافہ کریں، پھر مستطیل نقش کریں۔ لطفاً یاد رکھیں کہ جب بھی آپ transform() کا استعمال کرتے ہیں تو وہ پچھلے تبدیلی کا ماتریکس پر تعمیر کرتا ہے:

آپ کا براوزر HTML5 کینووس تگ کو مدد نہیں دیتا.

جاوا اسکریپت:

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);

خود کا تجربہ کریں

جملہ

context.transform(a,b,c,d,e,f);

پارامتر کا مظہر

پارامتر وصف
a افقی طور پر بچاؤ نقشہ.
b افقی طور پر کج کج نقشہ.
c عمودی طور پر کج کج نقشہ.
d عمودی طور پر بچاؤ نقشہ.
e عمودی طور پر نقشہ میں نقل.
f افقی طور پر نقشہ میں نقل.

براوزر سپورٹ

تبصرے میں شمارا ت کیا گیا ہے کہ پہلا براوزر جو اس کی اپنی پورا خصوصیت کا پورا پورا سپورٹ کرتا ہے کی نسخہ.

Chrome Edge Firefox سافری آپرا
Chrome Edge Firefox سافری آپرا
4.0 9.0 3.6 4.0 10.1

تعلیمات:اینٹرنیشنل ایکسپلورر 8 اور اس سے پہلے کی نسلیں <canvas> علامت کو نہیں سپورٹ کرتی ہیں۔

Canvas 参考 دستور زبان