روش transform() کانواس
تعریف و استفاده
هر شیء روی کانواس دارای یک ماتریس تغییر فعلی است.
transform() روش جایگزین ماتریس تغییر فعلی با استفاده از ماتریسی که در زیر توضیح داده شده عمل می‌کند:
a c e b d f 0 0 1
به عبارت دیگر، transform() به شما اجازه می‌دهد تا محیط فعلی را بزرگتر، کوچکتر، حرکت دهید، بچرخانید و مایل کنید.
نکته:این تغییر تنها بر روی طراحی‌هایی که پس از فراخوانی transform() انجام می‌شود تأثیر می‌گذارد.
نکته:رفتار روش transform() در برابر ماتریس تغییرات rotate()وscale()وtranslate() یا تغییرات دیگری که با استفاده از transform() انجام می‌شود. به عنوان مثال: اگر شما طراحی خود را به دو برابر بزرگتر کرده‌اید، روش transform() طراحی را به دو برابر بزرگتر خواهد کرد، بنابراین طراحی شما در نهایت چهار برابر بزرگتر خواهد شد.
نکته:لطفاً ببینید setTransform() روشی که بدون تغییر رفتار در برابر تغییرات دیگر عمل نمی‌کند.
مثال
یک مستطیل بکشید؛ یک ماتریس تغییر جدید را با استفاده از transform() اضافه کنید و مستطیل را دوباره بکشید؛ یک ماتریس تغییر جدید اضافه کنید و مستطیل را دوباره بکشید. توجه داشته باشید که هر بار که transform() فراخوانی می‌شود، آن بر روی ماتریس تغییر قبلی ساخته می‌شود:
JavaScript:
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 | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:نسخه‌های 8 و قدیمی‌تر از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.
