قماش هو تقنية الويب التي توفر القدرة على رسم الكائنات الرسومية على صفحة ويب باستخدام جافا سكريبت. واحدة من السمات الرئيسية للقماش هو رسم الأشكال الهندسية مثل الدوائر. رسم دائرة على قماش بسيط للغاية ولا يتطلب سوى بضع خطوات.
الخطوة الأولى هي إنشاء عنصر قماش في مستند هتمل. يتم استخدام العلامة لهذا الغرض. ثم تحتاج إلى تحديد أبعاد قماش باستخدام سمات العرض والارتفاع. فمثلا,.
الخطوة الثانية هي الحصول على سياق الرسم باستخدام جافا سكريبت. للقيام بذلك ، تحتاج إلى الحصول على عنصر قماش من شجرة دوم واستدعاء طريقة جيتكونتيكست("2 د") منه. على سبيل المثال ، دع قماش = وثيقة.جيتليمنتبيد ("ميكانفاس") ؛ السماح كتكس = قماش.جيتكونتيكست ("2د")؛.
الخطوة الثالثة هي رسم دائرة على القماش. للقيام بذلك ، استخدم طريقة القوس() في سياق الرسم. تقبل الطريقة عدة معلمات ، بما في ذلك إحداثيات مركز الدائرة ونصف القطر وزوايا البداية والنهاية. على سبيل المثال ، كتكس.قوس(250, 250, 100, 0, 2 * الرياضيات.بي)؛.
بعد استدعاء طريقة القوس () ، لن يتم رسم الدائرة على اللوحة القماشية بعد. لرسم دائرة ، تحتاج إلى استدعاء طريقة الحد () أو التعبئة () لسياق الرسم ، والتي ستحدد ما إذا كنت تريد تحديد حدود الدائرة أو ملئها بالألوان. على سبيل المثال ، كتكس.السكتة الدماغية () ؛ أو كتكس.ملء ()؛.
- التحضير والإعداد
- اختيار وإعداد الأدوات
- إعداد مساحة العمل
- ارسم دائرة
- إنشاء الأساس
- سؤال وجواب
- كيف يمكنني رسم دائرة على قماش?
- ما هي المعلمات لا تقبل طريقة 'قوس'?
- هل من الممكن تغيير لون وسمك الخط عند رسم دائرة على قماش?
التحضير والإعداد
قبل البدء في رسم دائرة على عنصر اللوحة القماشية، تحتاج إلى إكمال عدة خطوات تحضيرية:
- قم بإنشاء عنصر قماش على الصفحة. للقيام بذلك ، استخدم العلامة مع سمات العرض والارتفاع لتعيين أبعاد قماش.
- الحصول على سياق الرسم باستخدام طريقة جيتكونتيكست. في وسيطة الطريقة ، حدد القيمة ' 2د ' للحصول على سياق الرسم ثنائي الأبعاد.
- اضبط خيارات الرسم. يمكنك تخصيص لون الخطوط وملء الأشكال ، بالإضافة إلى الخصائص الأخرى لسياق الرسم.
يظهر التعليمة البرمجية التالية مثالا على إنشاء عنصر قماش والحصول على سياق رسم:
فار قماش = وثيقة.جيتليمينتبيد ('ميكانفاس');
فار كتكس = قماش.جيتكونتيكست ('2د');
بعد الانتهاء من هذه الخطوات ، سيكون لديك حق الوصول إلى الوظائف والأساليب التي تسمح لك بالرسم على عنصر اللوحة القماشية. في القسم التالي ، سننظر في كيفية رسم دائرة باستخدام سياق الرسم.
اختيار وإعداد الأدوات
لرسم دائرة على عنصر قماش ، ستحتاج إلى الأدوات التالية:
- عنصر قماش من شأنها أن تكون بمثابة قماش للرسم.
- 2د سياق الرسم لعنصر قماش. يمكنك الحصول على سياق الرسم عن طريق استدعاء طريقة جيتكونتيكست() على عنصر قماش وتمريرها وسيطة '2 د'.
يوجد أدناه مثال على الكود الذي ينشئ عنصر قماش ويحصل على سياق الرسم:
"'جافا سكريبت
'`
في هذا المثال ، نقوم بإنشاء عنصر قماش مع معرف" ميكانفاس " وتعيين عرضه وارتفاعه إلى 500 بكسل في كل بعد. ثم نحصل على سياق الرسم ، وتعيينه إلى متغير كتكس.
ستسمح لك الأدوات التي أعددتها بالفعل بالبدء في رسم دائرة على اللوحة القماشية. أنت الآن جاهز للانتقال إلى الخطوة التالية — رسم دائرة على اللوحة القماشية.
إعداد مساحة العمل
قبل البدء في رسم دائرة على اللوحة القماشية ، يجب عليك إجراء بعض التعديلات على مساحة العمل. يتم وصف الخطوات الأساسية للإعداد أدناه:
- إنشاء عنصر قماش: داخل مستند هتمل ، تحتاج إلى إنشاء عنصر قماش باستخدام علامة. مثال: . تتضمن السمات الرئيسية التي يمكن تعيينها المعرف والعرض والارتفاع.
- الوصول إلى اللوحة القماشية: بعد إنشاء عنصر اللوحة القماشية ، تحتاج إلى الوصول إليه باستخدام جافا سكريبت. للقيام بذلك ، يمكنك استخدام طريقة جيتليمنتبيد وتمرير قيمة معرف عنصر قماش لذلك. على سبيل المثال،: فار قماش = وثيقة.جيتليمنتبيد ("ميكانفاس");
- الحصول على سياق قماش: للرسم على قماش ، تحتاج إلى الحصول على سياقها. السياق الأكثر استخداما هو "2د" ، والذي يسمح لك للعمل مع الرسومات ثنائية الأبعاد. للحصول على السياق ، يمكنك استخدام طريقة جيتكونتيكست وتمرير الوسيطة "2 د" إليها. مثال:فار كتكس = قماش.جيتكونتيكست ("2د");
ارسم دائرة
لرسم دائرة على قماش ، تحتاج إلى اتباع عدة خطوات:
- إنشاء عنصر قماش على صفحة ويب:
- الحصول على سياق قماش للرسم:
- تعيين شكل السياق إلى "2د":
- باستخدام أساليب سياق قماش ، ارسم دائرة:
| خطوة | كود | الوصف |
| 1 | سي تي إكس.بيجينباث(); | ابدأ شكلا جديدا |
| 2 | سي تي إكس.قوس (س ، ص ، دائرة نصف قطرها ، ستارتانغل ، إندانغل ، عكس اتجاه عقارب الساعة); | تحديد معلمات الدائرة: إحداثيات المركز (س ، ص) ، نصف القطر ، زوايا البداية والنهاية ، اتجاه التحايل على الشكل (في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة) |
| 3 | سي تي إكس.كلوسيباث(); | الانتهاء من الشكل |
| 4 | سي تي إكس.فيلستيل = 'اللون'; | تعيين لون التعبئة من الشكل |
| 5 | سي تي إكس.ملء(); | ملء الشكل مع اللون |
مثال:
كونست قماش = وثيقة.جيتليمينتبيد ('ميكانفاس');كونست كتكس = قماش.جيتكونتيكست ('2د');
سي تي إكس.بيجينباث();
سي تي إكس.قوس (150 ، 150 ، 100 ، 0 ، الرياضيات.بي * 2 ، خطأ);
سي تي إكس.كلوسيباث();
سي تي إكس.فيلستيل = 'الأزرق';
سي تي إكس.ملء();
نتيجة لذلك ، سيتم رسم دائرة في المنتصف عند (150 ، 150) ، بنصف قطر 100 ولون تعبئة أزرق.
إنشاء الأساس
قبل البدء في رسم دائرة على اللوحة ، تحتاج إلى إنشاء اللوحة القماشية نفسها. يتم استخدام العلامة لهذا الغرض. وهو ينص على رسوم ، والتي يمكنك رسم مختلف الأشكال والعناصر.
إليك كيفية إنشاء أساس لرسم دائرة:
إذا كنت ترغب في تعيين أنماط للقماش ، يمكنك القيام بذلك عن طريق كس. لكن تذكر أن اللوحة القماشية لها طرقها وخصائصها الخاصة للرسم ، لذلك قد لا يؤثر تغيير الأنماط عليها.
سؤال وجواب
كيف يمكنني رسم دائرة على قماش?
من أجل رسم دائرة على قماش ، تحتاج إلى استخدام طريقة `قوس` من سياق الرسم. تأخذ هذه الطريقة عدة معلمات ، بما في ذلك إحداثيات مركز الدائرة ونصف القطر وزوايا الرسم الأولية والنهائية. بعد ذلك ، تحتاج إلى استدعاء طريقة `ملء` أو `السكتة الدماغية` لملء أو دائرة قماش.
ما هي المعلمات لا تقبل طريقة 'قوس'?
طريقة` قوس ' يقبل المعلمات التالية: إحداثيات مركز الدائرة (س و ص) ، ونصف قطر الدائرة ، والزاوية الأولية والنهائية في راديان (يمكنك استخدام `الرياضيات.بي ' للراحة). يمكنك أيضا تحديد اتجاه العرض (في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة) باستخدام المعلمة الأخيرة.
هل من الممكن تغيير لون وسمك الخط عند رسم دائرة على قماش?