روش transform() کانواس HTML
تعریف و استفاده
هر عنصر روی کانواس دارای یک ماتریس تغییر فعلی است.
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 | تصویر کشیدن عمودی |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را پشتیبانی می‌کند.
| کروم | کنج | افرادا | سفاری | اپرا |
|---|---|---|---|---|
| کروم | کنج | افرادا | سفاری | اپرا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:اینترنت اکسپلورر 8 و نسخه‌های پیشین از <canvas> پشتیبانی نمی‌کنند.
