ملخص التعلم على القماش الثالث: رسم المسارات - قطع الخطوط

بعض أساليب الرسم في بيئة الرسم Canvas هي أساليب رسم فورية، وبعض أساليب الرسم تعتمد على المسار.

هناك طريقتان فقط لرسم الرسومات على الفور: StrokeRect() وfillRect() على الرغم من أن الطريقتينstrokezText() وfillText() يتم رسمهما أيضًا على الفور، إلا أن النص لا يعتبر رسمًا.

تعتمد معظم أنظمة الرسم، مثل: SVG (Scalable Verctor Graphics، ورسومات متجهة قابلة للتحجيم)، وAdobe Illustrator، وما إلى ذلك، على المسارات.

عند استخدام أنظمة الرسم هذه، تحتاج إلى تحديد المسار أولاً، ثم رسمه أو تعبئته، أو يمكنك رسمه وتعبئته بحيث يمكن عرض الشكل.

ثلاث طرق للرسم في قماش:

في بيئة رسم Canvas، يتم أيضًا رسم مقاطع الخط بناءً على المسارات، والتي تسمى المسارات الخطية. طرق إنشاء المسارات الخطية هي: moveTO() وlineTo() فقط عن طريق استدعاء أسلوب السكتة الدماغية () بعد إنشاء المسار سيتم رسم الأجزاء في قماش.

هذه هي طريقة الرسم المعتمدة على المسار التي ذكرناها سابقًا، والتي يجب تحديدها أو تعبئتها؛

عادة ما تكون نقطتان متصلتان بخط، لذا فإن رسم مقطع خطي أمر بسيط للغاية. حدد نقطة بداية السطر من خلال moveTO()، ثم انتقل إلى نقطة أخرى من خلال lineTo().

 دالة drawLine(){ cxt.moveTo(50, 50);

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

لذلك نقوم بتعديل الطريقة إلى ما يلي بحيث يتم رسم قطعة خطية

 دالة drawLine(){ cxt.moveTo(50, 50);

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

 دالة drawLine(){ cxt.lineTo(50, 50);

تلخيص استخدام moveTo() وlineTo()

• moveTo(x,y): نقل الحد إلى الإحداثيات المحددة x وy، وإضافة مسار فرعي إلى المسار الحالي لن تقوم هذه الطريقة بمسح أي مسارات فرعية في المسار الحالي.
• lineTo(x,y): ارسم خطًا مستقيمًا من الموضع الحالي إلى الموضع x وy المحدد إذا لم تكن هناك مسارات فرعية في المسار الحالي، فإن هذه الطريقة تتصرف بنفس طريقة moveTo(). إذا كان هناك مسار فرعي في المسار الحالي، فستضيف هذه الطريقة النقطة التي تحددها إلى المسار الفرعي.

تغيير عرض مقطع الخط

 function= 14; cxt.lineTo(50, 50);

 دالة drawLine(){ cxt.lineWidth = 14;

يمكننا أيضًا استخدام كائن CanvasGradient أو كائن CanvasPattern لإضافة ألوان أو أنماط متدرجة إلى مقاطع الخط.

 function drawLine(){ cxt.lineWidth = 14; var gradient = cxt.createLinearGradient(0, 0, Canvas.width/2, Canvas.height/2); 0.5, 'purple'); gradient.addColorStop(1, 'yellow'); cxt.lineTo(50, 50);

من خلال طرق الرسم الثلاثة في اللوحة القماشية أعلاه، يمكننا أن نرى أن مسار القوس في الصف الثاني هو مسار مفتوح، ومسار القوس في الصف الأخير هو مسار مغلق. فكيف يتم تحقيق المسار المغلق؟

دعونا نلقي نظرة على اثنين من الطرق الأكثر أهمية لرسم المسار في القماش.

• beginPath(): امسح جميع المسارات الفرعية الحالية لإعادة تعيين المسار الحالي وإعادة تخطيط المسار.
• ClosePath(): يُستخدم لإغلاق مسار مفتوح. ليس من الضروري إذا كان الرسم البياني مغلقًا بالفعل، أي أن النقطة الحالية هي نقطة البداية، فإن هذه الوظيفة لا تفعل شيئًا.

قم أولاً برسم خط متعدد الخطوط

 دالة drawLine(){ cxt.strokeStyle = 'green'; );}

قم بتعديل التعليمات البرمجية في المثال أعلاه وإضافة أساليب beginPath() و ClosePath() إلى التعليمات البرمجية.

 function drawLine(){ // المثلث cxt.strokeStyle = 'green'; cxt.beginPath(); ()؛ cxt.lineTo(150, 250);

يمكن ملاحظة أننا رسمنا مسارين في اللوحة القماشية

ملاحظة: بعد استدعاء beginPath()، أو عند إنشاء اللوحة القماشية لأول مرة، يُنظر عادةً إلى أمر إنشاء المسار الأول على أنه moveTo(). لذلك يجب علينا استخدام beginPath() أولاً عند رسم الرسومات.

دعونا نواصل تعديل الكود الخاص بنا

 function drawLine(){ // المثلث cxt.strokeStyle = 'green'; cxt.beginPath(); (150، 150)؛ //Polyline cxt.translate(150, 0); cxt.strokeStyle = 'red'; cxt.lineTo(150, 150); cxt. ClosePath(); // المثلث المملوء باللون الأخضر cxt.translate(150, 0); .lineTo(50, 150); cxt.fill(); cxt. ClosePath(); // المثلث المملوء باللون الأحمر cxt.translate(150, 0); 50, 50); 150);

من المثال أعلاه، يمكننا أن نرى أن المواضع المختلفة لـ ClosePath() ستؤثر أيضًا على رسوماتنا.

ملاحظة: عند استدعاء الدالة fill()، سيتم إغلاق جميع الأشكال غير المغلقة تلقائيًا، لذا فإن وظيفة ClosePath() ليست ضرورية في هذا الوقت.

لكن استدعاء السكتة الدماغية (): إذا كنت تستخدم طريقة ClosePath () فقط قبل طريقة السكتة الدماغية ()، فسيتم تشكيل مسار مغلق إذا قمت باستدعاء طريقة ClosePath () بعد طريقة السكتة الدماغية ()، فسيتم رسم الرسومات والحالية تم إغلاق مسار الرسم، لذلك لا تعمل طريقة ClosePath().

دعونا ننظر إلى مثال أولا

 دالة drawLine(){ // المثلث cxt.lineWidth = 1 cxt.beginPath(); ; cxt.lineTo(450.5, 150.5);

يمكننا أن نرى من الصورة أننا قمنا بتعيين عرض الخط لكلا قطعتي الخط على 1 بكسل، لكن قطعة الخط أعلاه ترسم بيكسلين.

إذا قمت برسم مقطع خطي بعرض 1 بكسل عند حدود 2 بكسل معينة، فإن مقطع الخط سيشغل فعليًا 2 بكسل عرضًا؛

لأنه عندما تقوم برسم مقطع خط عمودي بعرض 1 بكسل عند حد البكسل، فإن كائن بيئة رسم اللوحة القماشية سيحاول رسم نصف بكسل على يمين الخط المركزي للحد، ونصف بكسل آخر على يسار الحد خط الوسط.

ومع ذلك، ليس من الممكن رسم مقطع خطي بعرض نصف بكسل داخل بكسل كامل، لذلك يتم توسيع نصف بكسل في كلا الاتجاهين إلى 1 بكسل.

من ناحية أخرى، يتم الرسم بين بيكسلين، بحيث لا تمتد نصف البيكسلات الموجودة على الجانبين الأيسر والأيمن من خط الوسط، وسوف تشغل مجتمعة عرض 1 بكسل تمامًا. لذلك، إذا كنت تريد رسم مقطع خطي يبلغ عرضه 1 بكسل حقًا، فيجب عليك رسم مقطع الخط بين بكسلين

الآن بعد أن فهمنا كيفية رسم مقطع خطي حقيقي بمقدار 1 بكسل، فلنبدأ في رسم الشبكة

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; // ارسم خطًا رأسيًا for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt.stroke(); } // ارسم خطًا أفقيًا for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); }}drawLine(10, 10);

في المثال أعلاه، نرسم قطعة الخط على البكسل بين بكسلين، ويكون عرض قطعة الخط المرسومة 0.5 بكسل فقط.

على الرغم من أن مواصفات اللوحة القماشية لا تنص عليها صراحةً، إلا أن جميع تطبيقات لوحة الرسم في المتصفح تستخدم تقنية منع التعرج لإنشاء تأثيرات رسم مقطع خطي للبكسل الفرعي.

يشرح هذا القسم بشكل أساسي طريقة رسم المسارات الخطية في اللوحة القماشية، ويستخدم بشكل أساسي moveTo() لتحديد نقطة البداية، وlineTo() لتحديد نقطة النهاية، وStroke() لرسم المسار الحالي. هذه الطرق الثلاث ترسم مقاطع خطية

هناك طريقتان مهمتان لرسم المسارات في اللوحة القماشية، beginPath() و ClosePath(). يعد استدعاء beginPath() قبل رسم الرسومات خطوة ضرورية لرسم رسومات متعددة.

يمكن حذف ClosePath() عند استخدام fill()، ويجب عليك أيضًا الانتباه إلى موضع استدعاء طريقة ClosePath().

عند رسم مقطع خطي، يمكننا استخدام lineWidth لتغيير عرض مقطع الخط وStrokeStyle لتغيير لون مقطع الخط.

اكتشف حدود البكسل لقطعة الخط حتى نتمكن من رسم عرض خط حقيقي يبلغ 1 بكسل.

يرجى من الطلاب المهتمين برسم الرسومات على القماش الاستمرار في الاهتمام بالتحديثات اللاحقة. إذا كان هناك شيء خاطئ، فيرجى الإشارة إليه والتواصل أكثر.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.