الرسومات عن طريق Canvas فى HTML5

من الخواص الجديدة والقوية فى HTML والتى تمكن المصصمين من انشاء الرسومات التوضحية.

اولًا علينا كتابة الكود الخاص بالعنصر canvas فى HTML وهو عنصر له خاصتين الارتفاع height و العرض width.

وله الخواص الاخرى العادية مثل class و id و style وهى خواص عامة لاي عنصر فى HTML وليست لهذه العنصر فقط.

See the Pen canvas element by amrelarabi (@amrelarabi) on CodePen.

نلاحظ فى المثال اننا اعطينا style الخاص بالخط الخارجى للعنصر Canvas وهو border ونلاحظ ايضًا ان هذه القيم تحدد فقط الشكل العام للعنصر Canvas ولكن عملية الرسم الفعلية لا تتم فى CSS وانما فى Javascript كما سنرى فى المثال التالى.

رسم خط بسيط عن طريق Canvas

See the Pen simple line canvas by amrelarabi (@amrelarabi) on CodePen.

اليك امثلة بسيطة على عنصر Canvas

رسم دائرة

See the Pen canvas circle by amrelarabi (@amrelarabi) on CodePen.

رسم جملة

See the Pen canvas hello world by amrelarabi (@amrelarabi) on CodePen.

See the Pen canvas smile by amrelarabi (@amrelarabi) on CodePen.