طريقة HTML canvas lineTo()

دليل مرجعي لـ HTML5 Canvas

التعريف والاستخدام

lineTo() يضيف نقطة جديدة، ثم ينشئ خط من هذه النقطة إلى النقطة المحددة آخرًا في اللوحة (لا ينشئ هذا الطريقة الخط).

نصيحة:استخدم stroke() يستخدم هذا الطريقة للرسم المسار المحدد على اللوحة.

مثال

مثال 1

بدء مسار جديد، انتقل إلى موقع 0,0. أنشئ خط يصل إلى موقع 300,150:

متصفحك لا يدعم علامة HTML5 canvas.

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:

متصفحك لا يدعم علامة HTML5 canvas.

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

ملاحظة:Internet Explorer 8 وكل الإصدارات السابقة لا يدعم عنصر <canvas>.

دليل مرجعي لـ HTML5 Canvas