التعليق: يمكننا استخدام "PATH" لرسم أي رسم. المسار هو ببساطة سلسلة من النقاط والخطوط التي تربط هذه النقاط. لن يكون لأي سياق قماش "مسار حالي" واحد فقط ، وعندما يتم استدعاء context.save () ، لن يتم حفظ "المسار الحالي"
إبداعي:؟ ع = 371
تتم ترجمة هذه المقالة من قماش ستيف فولتون وجيف فولتون HTML5 ، الفصل 2 ، باستخدام مسارات لإنشاء خطوط
بالنسبة لـ HTML5 Canvas ، يمكننا استخدام المسارات لرسم أي رسم بياني. المسار هو ببساطة سلسلة من النقاط والخطوط التي تربط هذه النقاط. سيكون لأي سياق قماش مسار حالي واحد فقط ، وعندما يتم استدعاء context.save () ، لن يتم حفظ المسار الحالي.
بداية ونهاية المسار
يمكن أن يبدأ استدعاء BeginPath () مسارًا ، بينما يدعو ClosePath () إلى إنهاء المسار. إذا قمت بتوصيل نقطة في المسار ، فإن هذا الاتصال يشكل مسارًا فرعيًا. إذا تم توصيل النقطة الأخيرة في الممر الفرعي بنقطةه الأولى ، فنحن نعتبر أن الممر الفرعي مغلق.
رسم الخط
تتكون عملية المسار الأكثر أساسية من مكالمات متكررة إلى أوامر Moveto () و lineto (). على سبيل المثال ، المثال التالي:
وظيفة السحب () {
context.strokestyle = "Black" ؛
context.linewidth = 10 ؛
context.linecap = 'square' ؛
context.beginPath () ؛
context.moveto (20 ، 0) ؛
context.lineto (100 ، 0) ؛
سياق. ضربة () ؛
context.closepath () ؛
}
في المثال أعلاه ، نصور مقطع خط أفقي بعرض 10 بكسل ؛ في الوقت نفسه ، قمنا أيضًا بتعيين خصائص Linecap و Strokestyle. فيما يلي قائمة ببعض الخصائص الشائعة الاستخدام:
linecap
يحدد LinECAP النمط في كلا طرفي شريحة الخط في القماش ، ويمكن ضبطه على واحدة من القيم الثلاث التالية:
بعقب. القيمة الافتراضية ؛ أضف حواف مستقيمة في كلا طرفي قطاع الخط.
دائري. أضف غطاء خط نصف دائري في كل طرف من قطاع الخط. قطر غطاء الخط يساوي عرض قطاع الخط.
مربع. أضف قبعات خط مربعة إلى كلا طرفي قطاع الخط. طول غطاء الخط يساوي عرض قطاع الخط.
خط
يحدد Linejoin نمط الزاوية عند تقاطع قسمين خطين. فيما يلي ثلاث قيم اختيارية:
ميتري. تقصير؛ يخلق زاوية حادة. يمكنك الحد من طول الزوايا الحادة عن طريق ضبط خاصية miterlimit - smitterlimit هو الحد الأقصى لنسبة طول الزاوية الحادة وعرض الخط ، والافتراضي هو 10.
شطبة. إنشاء شطبة.
دائري. إنشاء زاوية مستديرة.
عرض الخط
يحدد LineWidth سمك الخط ، والافتراضي هو 1.0.
Strokestyle
يحدد Strokestyle الأنماط مثل الألوان المستخدمة لتقديم الخطوط.
ملاحظة المترجم: عندما يتم ضبط Line -Jiter على miter ، ولكن طول الزاوية الحادة يتجاوز حد miterlimit ، ستعرض القماش تأثير الزاوية المائلة.