رسم الرسومات باستخدام JavaScript

 

بعد إضافة العلامة <cznvas> لتحديد مساحة الرسم يمكن استعمال أوامر الرسم باستعمال JavaScript كما في المثال التالي:

في هذه السطور بعد تحديد مساحة الرسم يتم تحديد بداية أوامر البرمجة باستعمال JavaScript باستعمال العلامة <script> ثم الإعلان عن متغير بالاسم c مع استعمال هذا المتغير في الإشارة إلى مساحة الرسم المحددة مسبقاً ثم الإعلان عن متغير ctx للإشارة إلى محتوى المستند ثم استعمال هذا المتغير في تحديد طبيعة إطار المحتوى ثم استعمال الدالة fillrect () لرسم مستطيل بالأبعاد المحددة وتظهر نتيجة التنفيذ كما في الشكل:

مثال:

في هذا المثال يتم استعمال أوامر الرسم لرسم خط مستقيم كما في السطور التالي:

الجديد في هذه السطور هو استعمال الأمر moveto () لتحريك مؤشر الرسم إلى النقطة 0.0 ثم استعمال الأمر lineto () لرسم خد مستقيم إلى النقطة 200.200 من النقطة الحالية وهي 0.0 ويظهر ذلك في نتيجة التنفيذ كما في الشكل:

مثال: Example- Circle

في هذا المثال يتم استعمال أوامر الرسم لرسم دائرة كما في السطور التالية:

الجديد في هذه السطور هو استعمال الأمر arc () لرسم دائرة بتحديد مواصفات هذه الدائرة بتحديد نقطة المركز ونصف القطر وتكون نتيجة التنفيذ كما في الشكل: