HTML کینوس setTransform() طریقہ کار

دستورالعمل‌های کانواس HTML5

تعریف و استعمال

کینوس پر ہر ایک شیء کو موجودہ تبدیل ماتریکس حاصل ہوتا ہے.

setTransform() طریق میں آپ کا موجودہ تبدیل ماتریکس کو نئی تبدیل کا ماتریکس بنایا اور نئی تبدیل کا ماتریکس کے ساتھ کا استعمال کیا جاتا ہے. transform().

آپ کا کہنا یعنی setTransform() آپ کو مختصر کردیا، چرخاندیا، حرکت دیا اور سمت بدلنے کی اجازت دیتا ہے.

توجه:یہ تبدیل صرف setTransform() کی طلب کے بعد کی نقاشی کو متاثر کرتی ہے.

مثال

ایک مستطیل بناکر، setTransform() کا استعمال کرکے تبدیل کردیا اور نئی تبدیل کا ماトリکس بنایا، دوبارہ مستطیل بناکر، تبدیل کو دوبارہ نئی تبدیل کا ماトリکس بنایا، پھر مستطیل بناکر، تبدیل کو دوبارہ نئی تبدیل کا ماتریکس بنایا، لطفاً یقین رکھیں کہ جب بھی آپ setTransform() کو بلا کیا تھا، وہ پچھلے تبدیل کا ماتریکس کو نئی تبدیل کا ماتریکس بنانے کے لیے نئی تبدیل کا ماتریکس بنایا تھا، لہذا نیچے کے مثال میں، قرمز مستطیل دکھائی نہیں دیتی ہے، کیونکہ وہ نیلا مستطیل کے نیچے ہے:

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

JavaScript:

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

آزمایش کنید

قانون

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

مقدار پارامتر

پارامتر توضیح
a چرخش افقی نقاشی
b تغییر مایل افقی نقاشی
c تغییر مایل عمودی نقاشی
d تغییر اندازه عمودی نقاشی
e نقاشی افقی
f نقاشی عمودی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را کامل پشتیبانی می‌کند.

کروم آرزو افراط سافاری آپرا
کروم آرزو افراط سافاری آپرا
4.0 9.0 3.6 4.0 10.1

توجه:نسخه‌های 8 اینترنت اکسپلورر و قدیمی‌تر از <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های کانواس HTML5