روش Canvas setTransform()

کینواس مراجع

تعریف و استفاده

هر عنصر روی کanvas یک ماتریس تغییرات فعلی دارد.

setTransform() روشی که ماتریس تغییرات فعلی را به ماتریس یکپارچه تبدیل کرده و سپس با همان پارامترها اجرا می‌کند تغییرات.

به عبارت دیگر، setTransform() به شما اجازه می‌دهد که محیط فعلی را بزرگ‌تر، کوچک‌تر، چرخش، حرکت و مایل کنید.

تعلیمات:این تغییرات فقط روی نقاشی‌هایی که بعد از فراخوانی setTransform() انجام می‌شوند، اثر می‌گذارند.

مثال

یک مستطیل رسم کنید، از طریق setTransform() تغییرات را حذف کنید و یک ماتریس جدید ایجاد کنید، دوباره مستطیل را رسم کنید، تغییرات را حذف کنید و ماتریس جدید ایجاد کنید، سپس دوباره مستطیل را رسم کنید. توجه داشته باشید که هر بار که شما setTransform() را فراخوانی می‌کنید، ماتریس تغییرات قبلی را حذف کرده و ماتریس جدیدی ایجاد می‌کند، بنابراین در مثال زیر، مستطیل قرمز نمایش داده نمی‌شود زیرا زیر مستطیل آبی قرار دارد:

مخاطب شما پشتیبانی از تگ HTML5 canvas را ندارد.

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(ا,بی,سی,د,e,f);

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

پارامترها توضیحات
ا کمپوزیشن وردی افقی.
بی کمپوزیشن وردی افقی.
سی کمپوزیشن وردی عمودی.
د کمپوزیشن وردی عمودی.
e آزاد موٹر نقاشی
f وراٹ موٹر نقاشی

براوزر سپورٹ

جداول میں دوسرے سول میں اس کی پوری طرح سپورٹ کرنے والی براوزر کی نسلیں کی گئی ہیں。

کروم ایج فائرفاکس سافری آپرا
کروم ایج فائرفاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

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

کینواس مراجع