طراحی‌های گرافیکی در HTML

در HTML برای ایجاد و نمایش گرافیک‌های دوبعدی، از دو روش اصلی استفاده می‌شود: canvas و svg. هرکدام از این عناصر قابلیت‌های خاص خود را دارند و برای موارد مختلف طراحی گرافیکی استفاده می‌شوند.

1. استفاده از تگ canvas

تگ canvas یک سطح قابل رسم است که می‌توانید از آن برای ایجاد گرافیک‌های دینامیک، انیمیشن‌ها، بازی‌ها و دیگر طراحی‌های گرافیکی استفاده کنید. این تگ خود به‌تنهایی محتوا ندارد و برای کشیدن گرافیک‌ها باید از JavaScript استفاده کنید.

ساختار کلی تگ canvas:

<canvas id="myCanvas" width="500" height="500"></canvas>

id: شناسه‌ای برای دسترسی به canvas از طریق JavaScript.

width و height: ابعاد canvas را مشخص می‌کند. اگر این ویژگی‌ها مشخص نشوند، ابعاد پیش‌فرض 300x150 پیکسل خواهد بود.

مثال: کشیدن یک مستطیل روی canvas

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>

  var canvas = document.getElementById("myCanvas");

  var ctx = canvas.getContext("2d"); // گرفتن زمینه (context) برای رسم

  // کشیدن یک مستطیل

  ctx.fillStyle = "blue"; // انتخاب رنگ

  ctx.fillRect(50, 50, 200, 100); // x, y, عرض و ارتفاع مستطیل

</script>

getContext("2d"): این متد به شما امکان می‌دهد تا از یک زمینه دوبعدی (2D) برای رسم گرافیک استفاده کنید.
fillRect(x, y, width, height): متدی برای کشیدن مستطیل با رنگ دلخواه.

قابلیت‌های دیگر canvas:

کشیدن دایره:

ctx.beginPath();

ctx.arc(200, 200, 50, 0, Math.PI * 2);

ctx.fillStyle = "red";

ctx.fill();

رسم خط:

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(200, 200);

ctx.stroke();

نوشتن متن:

<svg width="500" height="500">

  <!-- اشیاء گرافیکی در اینجا قرار می‌گیرند -->

</svg>

2. استفاده از تگ svg

تگ svg برای ایجاد گرافیک‌های برداری (Vector Graphics) استفاده می‌شود. برخلاف canvas که یک سطح قابل رسم است، در svg می‌توانید اشیاء گرافیکی مختلف را به‌طور مستقیم در کد HTML تعریف کنید و از آن‌ها استفاده کنید. این اشیاء می‌توانند شامل خطوط، دایره‌ها، مستطیل‌ها و متن باشند.

ساختار کلی تگ svg:

<svg width="500" height="500">

  <!-- اشیاء گرافیکی در اینجا قرار می‌گیرند -->

</svg>

مثال: رسم یک دایره و مستطیل با SVG

<svg width="500" height="500">

  <!-- رسم دایره -->

  <circle cx="200" cy="200" r="50" fill="blue" />

  <!-- رسم مستطیل -->

  <rect x="50" y="50" width="200" height="100" fill="red" />

</svg>

<circle>: برای رسم دایره با ویژگی‌های cx, cy (مختصات مرکز) و r (شعاع).
<rect>: برای رسم مستطیل با ویژگی‌های x, y (مختصات گوشه سمت چپ بالا)، width و height.

قابلیت‌های دیگر SVG:

رسم خط:

<svg width="500" height="500">

  <line x1="50" y1="50" x2="200" y2="200" stroke="green" stroke-width="2"/>

</svg>

رسم چندضلعی:

<svg width="500" height="500">

  <polygon points="200,10 250,190 160,210" fill="purple"/>

</svg>

نوشتن متن:

<svg width="500" height="500">

  <text x="50" y="50" font-family="Verdana" font-size="35" fill="black">Hello, SVG!</text>

</svg>

تفاوت‌های اصلی بین canvas و svg:

رندرینگ:
- canvas: گرافیک‌ها به‌صورت پیکسلی رندر می‌شوند. یعنی شما گرافیک‌ها را به‌صورت پیکسلی می‌کشید و سپس از آن‌ها استفاده می‌کنید.
- svg: گرافیک‌ها به‌صورت برداری رندر می‌شوند، بنابراین کیفیت تصویر حتی با بزرگنمایی زیاد حفظ می‌شود.
دستکاری گرافیک‌ها:
- در canvas, برای تغییر یا حذف گرافیک‌ها باید دوباره آن‌ها را رسم کنید، زیرا پس از رسم، دیگر قابل دستکاری نیستند.
- در svg, گرافیک‌ها به‌صورت اشیاء جداگانه درختی ذخیره می‌شوند و می‌توانید آن‌ها را مستقیماً با JavaScript تغییر دهید.
کاربردها:
- canvas مناسب برای گرافیک‌های پیچیده، انیمیشن‌ها و بازی‌ها است که نیاز به محاسبات پیچیده دارند.
- svg برای طراحی‌های ساده‌تر، گرافیک‌های برداری (مانند نمودارها، آیکن‌ها و طرح‌های دقیق) مناسب است.

نتیجه‌گیری:

هرکدام از این عناصر برای اهداف خاص خود مناسب هستند:

از canvas برای گرافیک‌های پیکسلی و انیمیشن‌های پیچیده استفاده کنید.
از svg برای گرافیک‌های برداری و طراحی‌های دقیق که به‌راحتی قابل تغییر و دستکاری هستند استفاده کنید.

با انتخاب مناسب این دو ابزار، می‌توانید گرافیک‌های تعاملی و جذاب در صفحات وب خود ایجاد کنید.