English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
translate() هي طريقة إضافة تحويلات التدرج إلى grid من خلال تحريك canvas والنقطة المرجعية لـ canvas في اتجاه x الأفقي، والنقطة المرجعية في الاتجاه y العمودي في API Canvas 2D.
رسم مستطيل في موقع (10,10)، وقم بتعيين موقع (0,0) الجديد إلى (70,70). ثم أرسم نفس المستطيل مرة أخرى (لاحظ، الآن يبدأ المستطيل من موقع (80,80):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة translate() لـ HTML canvas - درس أساسي (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
على جهازك لا يدعم علامة التبويب HTML5 canvas.
</canvas>
<script>
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);
</script>
</body>
</html>اختبار لمعرفة ‹/›IEفيرفوكسأوبراكرومسافاري
يدعم إنترنت إكسبلورر 9، فيرفوكس، أوبرا، كروم وسافاري translate(). الطرق.
ملاحظة:لا يدعم نسخة إنترنت إكسبلورر 8 وكل السابقة علامة <canvas>.
يعيد تحديد موقع (0,0) على الرسم البياني.
ملاحظة:عندما تدعو إلى طريقة مثل fillRect() بعد translate()، يتم إضافة القيم إلى قيم أرقام الأسس (x و y).
| قواعد اللغة الجافا سكربت: | سياق.translate(x,y); |
|---|
ملاحظة: يمكنك تحديد واحد أو كلاهما من المتغيرات.
| المتغيرات | الوصف |
|---|---|
| x | إضافة القيمة إلى المحور الأفقي (x). |
| y | إضافة القيمة إلى المحور العمودي (y). |