15 الفصل السادس: HTML5 المتقدم
الفصل السادس: HTML5 المتقدم
2. التعامل مع الرسوميات
HTML5 قدم أدوات جديدة للتعامل مع الرسوميات والرسومات التفاعلية على الويب. في هذا الجزء، سنتناول اثنين من الوسوم الأساسية التي تُستخدم لإنشاء رسومات ديناميكية وتفاعلية: <canvas> و <svg>.
2.1. وسم <canvas> لعمل رسومات ديناميكية
<canvas>هو عنصر في HTML5 يتيح لك رسم رسومات ديناميكية مثل الأشكال أو الصور باستخدام JavaScript.- يمكن استخدامه لرسم الرسومات المتجهية (Vector) أو الرسومات النقطية (Raster)، وهو يوفر مساحة للرسم داخل الصفحة بداخلها.
- يتم استخدام JavaScript لتحكم في الرسم داخل عنصر
<canvas>.
كيفية استخدام <canvas>:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على <canvas></title>
</head>
<body>
<h1>رسم باستخدام <canvas></h1>
<!-- عنصر canvas -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); // تحديد نوع الرسم (2D)
// رسم مستطيل
ctx.fillStyle = "#FF0000"; // تحديد اللون
ctx.fillRect(50, 50, 200, 100); // رسم مستطيل (x, y, width, height)
// رسم دائرة
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // دائرة (x, y, radius, startAngle, endAngle)
ctx.fillStyle = "blue";
ctx.fill();
</script>
</body>
</html>
في المثال السابق:
- تم تحديد
<canvas>بمقاس 500×500 بكسل. - باستخدام JavaScript، تم رسم مستطيل أحمر ودائرة زرقاء داخل العنصر باستخدام
getContext("2d")الذي يحدد نوع الرسم (2D). fillRect()وarc()هي دوال JavaScript لرسم الأشكال.
ملاحظات مهمة:
- يمكنك استخدام
<canvas>في الألعاب، الرسوم المتحركة، أو تطبيقات تفاعلية مثل الرسومات البيانية أو الرسم الحر. - الرسم داخل
<canvas>يتم باستخدام JavaScript فقط، ولا يمكن استخدام HTML مباشرة لرسم الرسومات داخل<canvas>.
2.2. إضافة الرسوميات بـ SVG (Scalable Vector Graphics)
- SVG هو نوع آخر من الرسوميات المدعوم في HTML5 ويُستخدم لتمثيل الرسومات المتجهية (Vector Graphics).
- يختلف عن
<canvas>لأنه يعتمد على XML لإنشاء الأشكال، وبالتالي يكون قابلًا للتكبير والتصغير دون فقدان الجودة (Scalable). - يمكن استخدامه لعمل أي شكل رسومي تريده، مثل الأشكال الهندسية، النصوص، الرسوم التوضيحية، وما إلى ذلك.
كيفية استخدام <svg>:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على SVG</title>
</head>
<body>
<h1>رسومات باستخدام SVG</h1>
<!-- عنصر svg -->
<svg width="500" height="500">
<!-- رسم دائرة -->
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
<!-- رسم مستطيل -->
<rect x="150" y="50" width="200" height="100" stroke="black" stroke-width="3" fill="blue" />
<!-- رسم خط -->
<line x1="50" y1="200" x2="450" y2="200" stroke="green" stroke-width="2" />
<!-- رسم نص -->
<text x="200" y="300" font-size="30" fill="black">مرحبا بكم في SVG</text>
</svg>
</body>
</html>
في هذا المثال:
- استخدمنا
<svg>لتحديد مساحة الرسم. <circle>لرسم دائرة.<rect>لرسم مستطيل.<line>لرسم خط.<text>لإضافة نص داخل الرسم.
ملاحظات مهمة:
- الرسومات في
<svg>لا تعتمد على JavaScript بشكل أساسي ويمكن إنشاءها باستخدام أكواد HTML فقط. - الرسومات المتجهية (Vector) التي تُستخدم في
<svg>يمكن تكبيرها وتصغيرها دون فقدان الجودة. - يمكن تطبيق CSS أيضًا على العناصر داخل
<svg>لتحسين الشكل والمظهر.
الفرق بين <canvas> و <svg>
<canvas>:- يُستخدم لإنشاء رسومات تفاعلية وديناميكية باستخدام JavaScript.
- يعتمد على الرسم النقطي (Raster)، وبالتالي يتم استخدامه لإنشاء رسومات متحركة أو ألعاب.
- لا يمكن تعديل الرسم بعد إنشائه بسهولة.
<svg>:- يُستخدم لإنشاء رسومات متجهية (Vector) باستخدام HTML أو XML.
- الرسومات متجهة، مما يعني أنها قابلة للتكبير والتصغير بدون فقدان الجودة.
- يمكن التفاعل مع SVG باستخدام CSS و JavaScript بسهولة.
ملخص الفصل السادس: التعامل مع الرسوميات
في هذا الفصل تعلمنا كيفية التعامل مع الرسوميات في HTML5 باستخدام:
<canvas>: لإنشاء رسومات ديناميكية وتفاعلية باستخدام JavaScript.<svg>: لإنشاء رسومات متجهية قابلة للتكبير والتصغير باستخدام HTML أو XML.
كلا الوسمين يوفران أدوات قوية لإنشاء رسومات تفاعلية وجذابة على صفحات الويب. باستخدام هذه الأدوات، يمكنك إضافة رسومات وصور متقدمة لموقعك بسهولة.
