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