مسارات في لوحة HTML5

يستخدم مسار لوحة الرسم HTML5 لرسم أنواع متعددة من الأشكال على لوحة الرسم HTML5 (خطوط، دوائر، أضلاع، إلخ)، المسار يستخدم لرسم أنواع متعددة من الأشكال على لوحة الرسم HTML5

يتمثل مسار لوحة الرسم HTML5 في سلسلة من النقاط، ويتم بينها أوامر الرسم. على سبيل المثال، سلسلة من النقاط يمكن أن تكون خطوطًا مستقيمة، أو يمكن أن تكون منحنيات.

يستخدم المسار لرسم أنواع متعددة من الأشكال على لوحة الرسم HTML5 (خطوط، دوائر، أضلاع، إلخ)، لذا فإن فهم هذه الفكرة الأساسية مهم جدًا.

بدء وتنتهي المسار - مسار

استخدام دوال 2D上下ة beginPath() ويمكنك بدء وتنتهي المسار closePath()، كما يلي:

تعريف الوسيط var canvas = document.getElementById("ex1");
تعريف الوسيط var context = canvas.getContext("2d");context.beginPath();
// ... عمليات رسم المسار
context.closePath();

moveTo()

عندما تستخدم رسم المسار، تستخدم قلم افتراضي أو مؤشر. يتواجد هذا المؤشر دائمًا في نقطة معينة. يمكنك تحريك هذا المؤشر باستخدام دوال 2D Context، مثل moveTo(x, y)، كما يلي:

context.moveTo(10,10);

هذا المثال يتحرك بمؤشر إلى النقطة 10،10.

وظيفة lineTo()

يتم رسم الخط باستخدام دالة lineTo() من موقع مؤشر الافتراضي إلى النقطة المحددة كمعامل لدالة lineTo(). هذا مثال:

context.beginPath();
context.moveTo(10,10);
الخطوة التالية هي drawLineTo(50,50);
context.closePath();

هذا المثال يتحرك بمؤشر إلى النقطة 10,10، ومن ثم يرسم خطًا من هذه النقطة إلى النقطة 50،50.

تقوم دالة lineTo() أيضًا بتحريك مؤشر الخط إلى نهاية الخط. لذلك، في المثال السابق، يتم تحريك المؤشر إلى 50,50، بينما يشير إلى نقطة الرسم على اللوحة إلى هذه النقطة.

stroke() + fill()

لا يتم رسم أي مسار في الواقع قبل أن تشير 2D سياق إلى رسم المسار. يتم إكمال هذه العملية عن طريق استدعاء stroke() أو fill() في سياق 2D.
تقوم الدالة stroke() برسم هالة الشكل المحدد من قبل عمليات المسار.
يملأ الدالة fill() الشكل المحدد من قبل عمليات مسار.
إليك مثال على كلاهما، تطبيق stroke() و fill() على نفس الشكل:

<canvas id="ex1" width="500" height="75" style="border: 1px solid #cccccc;">
HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

هذه هي نتائج تشغيل الكود المذكور أعلاه:

LineWidth

يمكنك استخدام خاصية lineWidth في سياق 2D لضبط عرض الخطوط المختلفة للرسومات. إليك مثال:

context.lineWidth = 10;

النموذج المذكور أعلاه يضبط عرض جميع عمليات رسم الخطوط اللاحقة على 10 بكسل.
هذه ثلاثة خطوط، عرض كل منها 1، 5 و10:

عندما يكون عرض الخط أكبر من 1، يتم رسم عرض الخط الإضافي خارج الخط المركزي. أي أن إذا قمت برسم خط من 10,10 إلى 100,10 بعرض 10، فإن الخط سيبدأ فعليًا من 10,5 وينتهي إلى 10,15، ثم ينتقل إلى 100,5 و100,15 من هناك. مثل مستطيل.

القمة (lineCap)

عند رسم خطوط باستخدام المسار، يمكنك تعيين رأس الخط. تعريف رأس الخط كيفية رسم نهاية الخط.
يتم تعيين عرض الخط من خلال الخاصية lineCap 2D. يمكن أن تأخذ القيم التالية:

• butt

• round

• square

تسبب القيمة butt في جعل نهاية الخط مستوية ومتوافقة مع الخط.
تنتج القيمة round نهاية خط رأسية ذات زاوية رأسية تساوي نصف عرض الخط.
تسبب القيمة square في رسم مستطيل في نهاية الخط. حجم المستطيل هو عرض الخط x عرض الخط / 2.
هذه مجموعة من أمثلة توضيحية للخطافات. عرض جميع الخطوط عرضًا 10. الخط الأيسر يستخدم قيمة lineCap butt. الخط الوسط يستخدم قيمة lineCap round. الخط الأيمن يستخدم قيمة lineCap square

يمكن أن تكون القيمة lineCap butt وsquare قليلاً صعبة الرؤية الفرق بينها في الخطوط. لذلك، أنا أنشئ بعض أمثلة للخطوط باستخدام butt وsquare التي يتم رسمها قريبًا من بعضها البعض حتى تتمكن من رؤية الفرق. باستخدام butt في الأعلى أو اليسار وباستخدام square في الأسفل أو اليمين.

كما ترون، يستخدم القيمة lineCap القوس رقعة إضافية مستقيمة في نهاية الخط مما يجعل الخط أطول قليلاً.

رسم خطوط الاتصال (lineJoin)

خصائص lineJoin 2D لتحديد كيفية رسم النقاط التي تربط بين الخطوط. وتسمى هذه النقاط "خط الاتصال". يمكن أن تأخذ الخاصية lineJoin القيم التالية:

• miter

• bevel

• round

هذه ثلاثة امثلة للتعيين خط الاتصال:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

القيمة التي تنتجها miter تجعل الرسم مستقيمًا مع زوايا مستقيمة عند توصيل الخطوط.
القيمة التي تنتجها bevel تجعل الرسم مستقيمًا مع زوايا مستقيمة عند توصيل الخطوط.
القيمة التي تنتجها round تجعل الرسم مستقيمًا مع زوايا رأسية عند توصيل الخطوط.
هذه ثلاثة امثلة (من اليسار) miter،bevel وround كقيم للخصائص lineJoin.

arc()

وظيفة arc() 2D لتحديد وظيفة الرسم على اللوحة.

استخدمت هذه الوظيفة arc() 6 معلمات:

• x: افقية نقطة مركز دائرة القوس

• y: عمودية نقطة مركز دائرة القوس

• radius: نصف قطر دائرة القوس

• startAngle: زاوية الرadius التي تبدأ بها دائرة القوس

• endAngle: زاوية الرadius التي تنتهي بها دائرة القوس

• anticlockwise: اذا كانت اتجاه الاتجاه الدائري عكس الساعة (ليس الساعة).

هذا مثال على كود:

context.lineWidth = 3;
var x = 50;
var ي = 50;
var radius = 25;
var startAngle = (Math.PI / 180) * 45;
var endAngle = (Math.PI / 180) * 90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

يستخدم هذا مثال الرسم على دائرة منحنى، مركزها 50،50،ومحيطها 25 بكسل، من زاوية 45 درجة إلى 180 درجة. قد لاحظت أن الزوايا من 0 إلى 360 درجة يتم تحويلها إلى درجات.
هذا هو شكل رمز الرسم على لوحة الرسم:

هذا نفس مثال رمز، ولكن تم تعيين anticlockwise على true:

لرسم دائرة كاملة، قم بضبط startAngle على 0 و endAngle على 2 * Math.PI يساوي (Math.PI / 180) * 360

arcTo()

يملك سياق الـ 2D نقطةarcTo()يمكن استخداموظيفة lineTo()ولتبدو مثل وظيفتهاarc()لذلك سأقوم بتخطيها

quadraticCurveTo()

تستخدم دالة quadraticCurveTo() رسم منحنى بيزيير ثنائي من نقطة إلى أخرى. يتحكم المنحنى في نقطة واحدة فقط. هذا مثال على رمز:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 100;
var toY = 50;
var cpX = 75;
var cpY = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

استخدم هذا مثال على رمز التحكم 75،100 (cpX،cpY) لرسم منحنى من 50،50 إلى 100،50. المنحنى الناتج كما يلي:

النقاط الصغيرة على لوحة الرسم هي نقاط التحكم التي رسمتها هنا. عادة ليست جزءًا من المنحنى

bezierCurveTo()

تستخدم دالة bezierCurveTo() رسم منحنى بيزيير من نقطة إلى أخرى. المنحنيات الثلاثية الأوجه تحتوي على نقاط تحكم 2، بينما المنحنيات الثنائية الأوجه تحتوي على نقطة تحكم واحدة فقط. هذا مثال على رمز:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 100;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

استخدم هذا مثال على رمز التحكم 100،100 (cp1X،cp1Y) و 250،100 (cp2X،cp2Y) لرسم منحنى من 50،50 إلى 300،50. المنحنى الناتج كما يلي:

النقاط الصغيرة على لوحة الرسم هي نقاط التحكم التي رسمتها هنا لعرض مواقعها. ليست جزءًا من منحنى.
هذا مثال يستخدم نقاط البداية والنهاية والتحكم المختلفة:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 10;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

هذه هي المنحنى المتباين:

بالنسبة، نقطتين صغيرتين هي نقاط التحكم التي أقوم بتحديدها بوضوح