پیشنهاد دوره:
روش HTML canvas lineTo()
تعریف و استفاده lineTo()
توضیح:برای افزودن یک نقطه جدید استفاده کنید، سپس خطی از این نقطه به نقطه آخر مشخص شده در کanvas ایجاد می‌کنید (این روش خطی ایجاد نمی‌کند). stroke() این روش مسیر دقیقی را روی کanvas رسم می‌کند.
مثال
مثال 1
شروع به یک مسیر می‌کنیم، به موقعیت 0,0 حرکت می‌کنیم. یک خط به سمت موقعیت 300,150 ایجاد می‌کنیم:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
توضیح:مثال‌های بیشتر در پایین صفحه.
نحوه‌ی استفاده
context.lineTo(x,y);
مقدار پارامتر
| پارامتر | توضیح |
|---|---|
| x | مختصات x هدف مسیر. |
| y | مختصات y هدف مسیر. |
مثال‌های بیشتر
مثال 2
یک مسیر به شکل حرف L می‌کشید:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که این ویژگی را کامل پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:اینترنت اکسپلورر 8 و نسخه‌های پیشین از عنصر <canvas> را پشتیبانی نمی‌کنند.
