روش setTransform() کانواس HTML

دستورالعمل‌های کانواس 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 چیدن تصویر عمودی

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

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

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

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

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