وظيفة beginPath بسيطة للغاية، فهي تبدأ مسارًا جديدًا، ولكنها مهمة جدًا في عملية استخدام رسم القماش.
دعونا نلقي نظرة على جزء صغير من التعليمات البرمجية أولاً:
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); .fillStyle=yellow; ctx.fill();
لا يحتوي الكود الخاص بنا على أي أخطاء، لكننا حصلنا على مربعين أصفرين بطول جانبي يبلغ 100 بكسل، بدلاً من مربع أخضر وآخر أصفر. لماذا هذا؟
في الواقع، فإن طرق الرسم (الملء، والتأزيم) في القماش سترسم جميع المسارات بعد مسار البداية الأخير في الكود أعلاه، يتم ملء المستطيل الأول مرتين، المرة الأولى باللون الأخضر والمرة الثانية باللون الأصفر، لذلك يتم ملء مستطيلين باللون الأصفر. تم الحصول عليها بشكل مشابه لرسم مقاطع الخطوط أو المنحنيات أو الرسومات الأخرى، بغض النظر عن المكان الذي تنتقل إليه، طالما لم يكن لديك مسار بداية، فأنت ترسم مسارًا.
إذا كانت الرسومات التي ترسمها غير متوافقة مع ما تخيلته، فتذكر التحقق من startPath.
عند الحديث عن beginPath، يجب أن نذكر ClosePath في الواقع، لا علاقة بين الاثنين. ClosePath يعني إغلاق المسار، وليس إنهاء المسار، فهو يربط فقط نقطة نهاية المسار بنقطة البداية ، وليس لبدء طريق جديد.
نضيف مسارًا مغلقًا بعد التعبئة الأولى للكود أعلاه، وما زلنا نحصل على مستطيلين أصفرين.
لكن إذا أضفنا مسار begin لاحقًا، فسنحصل على مستطيلين بألوان مختلفة.
باختصار، لا تحاول بدء مسار جديد عن طريق إغلاق قسم من المسار، وإذا لم تغلق المسار، حتى لو بدأت مسارًا جديدًا، فلن يتم إغلاقه.
الملحق: فهم Beginpath وClosepath من القماشطريقة beginPath ().
var ctx = document.getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx.moveTo ( 100.5 , 20.5 ) ; سي تي إكس . ctx.lineTo ( 200.5 , 40.5 ) ctx.strokeStyle = '#f00' ;
0.5 هو تجنب الخطوط الباهتة. إذن ما نوع الرسومات التي سيحصل عليها الكود أعلاه؟ هل هو خط أسود وخط أحمر؟
من وجهة نظر الكود، لا توجد مشكلة في منطقنا، ولكن النتيجة هي أننا نحصل على خطين أحمرين، وليس خطًا أسود وخطًا أحمر.
إذا فهمت سبب ذلك، فلن تحتاج إلى قراءة الباقي. هذه هي أهمية beginPath.
سيتم رسم طرق الرسم في اللوحة القماشية (مثل الحد والتعبئة) بناءً على جميع المسارات بعد مسار البداية الأخير. على سبيل المثال، قمت بالرسم مرتين في الكود أعلاه، في الواقع، كانت هاتان الخطتان تعتمدان على جميع المسارات بعد المسار الأول. وهذا يعني أننا قمنا برسم المسار الأول مرتين، وكانت الضربة الأولى سوداء، وكانت الضربة الثانية حمراء، لذا كانت حمراء أيضًا في النهاية.
1. بغض النظر عن المكان الذي تستخدم فيه moveTo لتحريك الفرشاة، طالما أنك لا تبدأ المسار، فأنت دائمًا ترسم مسارًا.
2. وظائف مثل fillRect وStrokeRect، التي ترسم مناطق مستقلة مباشرة، لن تقاطع المسار الحالي.
إذا كانت الرسومات التي ترسمها مختلفة عما تخيلته، فتذكر التحقق مما إذا كان هناك مسار بداية معقول.
-------
عند الحديث عن beginPath، علينا أن نذكر ClosePath، هل يرتبط الاثنان ارتباطًا وثيقًا؟ الجواب هو لا شيء تقريبا.
لا يعني ClosePath إنهاء المسار، بل إغلاق المسار، وسيحاول توصيل مسار من نهاية المسار الحالي إلى نقطة البداية لإغلاق المسار بأكمله. لكن هذا لا يعني أن الطريق الذي بعده هو الطريق الجديد!
أضفنا ClosePath بعد السطر الأول في الكود أعلاه، ويمكننا أن نجد أننا لا نزال نحصل على خطين أحمرين.
لكن إذا أضفنا beginPath بعد الضربة الأولى، فسنحصل على خط أسود وخط أحمر كما هو متوقع.
ctx.stroke ( ) ; ctx.beginPath ( ) ; ctx.moveTo ( 100.5 , 40.5 ) ; ctx.lineTo ( 200.5 , 40.5 ) ctx.
باختصار، لا تحاول بدء مسار جديد عن طريق إغلاق مسار موجود. عندما تبدأ مسارًا جديدًا، لن يتم إغلاق المسار السابق.