روش Canvas setTransform()

منابع Canvas

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

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

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 تصویر کشیدن عمودی

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

منابع Canvas