روش HTML canvas translate()
تعریف و استفاده
translate() استفاده می‌کنید، موقعیت (0,0) روی صفحه‌کارت مجدداً تعیین می‌شود.
نکته:وقتی که بعد از translate() از روش‌هایی مانند fillRect() این‌گونه روش‌ها، مقادیر به x و y برای مقادیر مختصات.
مثال
یک مستطیل در موقعیت (10,10) رسم کنید و موقعیت جدید (0,0) را به (70,70) تنظیم کنید. دوباره یک مستطیل جدید رسم کنید (لطفاً توجه داشته باشید که حالا مستطیل از موقعیت (80,80) شروع به رسم می‌کند):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
جملات
context.translate(x,y);
مقدار پارامتر
| پارامتر | توضیح |
|---|---|
| x | مقدار اضافه شده به محور افقی (x). |
| y | مقدار اضافه شده به محور عمودی (y). |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که از این ویژگی پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:نسخه‌های 8 و قبل از آن از مرورگر Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.
