تقدم هذه المقالة بشكل أساسي أمثلة رسم مستطيلات في قماش HTML5. تستخدم هذه المقالة ثلاثة واجهات برمجة التطبيقات: FillRect و Strokerect و ClearRect. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
تتم ترجمة هذه المقالة من Canvas Steve Fulton & Jeff Fulton HTML5 ، الفصل 2 ، شكل المستطيل الأساسي.
دعونا نلقي نظرة على الشكل الهندسي البسيط المدمج في قماش - رسم مستطيلات. في القماش ، هناك ثلاث طرق لرسم مستطيل: FillRect ، السكتة الدماغية (strokerect) ، و ClearRect. بالطبع ، يمكننا أيضًا استخدام المسارات لتصوير جميع الأرقام بما في ذلك المستطيلات.
فيما يلي واجهات برمجة التطبيقات للطرق الثلاث المذكورة أعلاه:
1.fillRect (x ، y ، العرض ، الارتفاع). ارسم مستطيلًا صلبًا يبدأ من (x ، y) ، العرض والارتفاع.
2.StrokEct (x ، y ، العرض ، الارتفاع). ارسم صندوقًا مستطيلًا يبدأ من (x ، y) ، العرض والارتفاع. سيتم تقديم المربع المستطيل في أنماط مختلفة وفقًا لخصائص Strokestyle الحالية ، وخصائص الخط ، والضغط على الخط والميترليميت.
3. clearrect (x ، y ، العرض ، الارتفاع). امسح المنطقة المستطيلة التي تبدأ من (x ، y) ، العرض والارتفاع ، مما يجعلها شفافة تمامًا.
قبل استدعاء الطريقة أعلاه لرسم قماش ، نحتاج إلى ضبط نمط التعبئة والسكتة الدماغية. الطريقة الأساسية لتعيين هذه الأنماط هي استخدام ألوان 24 بت (المشار إليها في سلاسل سداسية سداسية). هنا مثال بسيط:
انسخ الرمز