يلا نتعلم نرسم بـ pure html بدون أي مكتبات خارجية
هنتعلم انهاردة نعمل logos ,رسومات بيانية كمان زي دي
الرسمة دي عبارة عن كود html عادي عبارة عن SVG
ودة اختصار لـ Scalable Vector Graphics
وبما انه Vector فأكيد زي مانت توقعت كدة جودة الصورة مش بتضيع مهما عملت زوم
مميزات SVG
بيتعمل بكود html فقط
جودته مش بتضيع مهما عملنا زوم
حجمه اصغر بكتير من الصور العادية
ممكن نعمل اي تعديلات عليه برمجيا بسهولة جدا
نقدر نسيرش فيه علي خصائص معينة
عشان نبدأ نرسم بنعمل الاول مساحة رسم وبعد كدة بنضيف الاشكال والنصوص جواها
<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- حط الرسومات هنا -->
</svg>HTML بيدينا اشكال جاهزة نقدر نستخدمها بسهولة زي المستطيلات والدواير والخطوط, وطبعا نقدر نرسم اي اشكال تانية براحتنا سواء خطوط مستقيمة او حتي كيرفات
علشان نرسم اي شكل علي الورق محتاجين نحدد:
مكان نقطة في الشكل, مثلا حرف المستطيل أو مركز الدائرة
مقاسات الشكل
ونقدر نميز الشكل ونضيف عليه خصائص اضافية
لون الشكل
لون وسمك الحواف
وكمان نقدر نضيف فلاتر للشكل زي مثلا فلتر التدرج اللوني وفلتر التوهج
يلا نرسم شوية اشكال
<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg" style="background: gray">
<!-- rectangle -->
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
<!-- circle -->
<circle r="45" cx="300" cy="50" fill="red" />
<!-- Ellipse -->
<ellipse rx="100" ry="50" cx="110" cy="200" fill="green" style="stroke:red;stroke-width:3" />
<!-- Line -->
<line x1="200" y1="150" x2="300" y2="250" style="stroke:red;stroke-width:2" />
</svg>ودة الشكل النهائي
شوية ملاحظات سريعة
x, y هما احداثيات نقطة, مثلا عشان نرسم مستطيل او مربع بنحدد احداثيات الركن العلوي الايسر للمستطيل
cx, cy احداثيات المركز, ودي بنستخدمها مثلا عشان نرسم الدوائر او الاشكال البيضاوية
r نصف القطر
المقالة الجاية هنتعلم فيها الاشكال المغلقة والاشكال غير المنتظمة .. خليك متابع