طراحیهای گرافیکی در HTML
در HTML برای ایجاد و نمایش گرافیکهای دوبعدی، از دو روش اصلی استفاده میشود: canvas و svg. هرکدام از این عناصر قابلیتهای خاص خود را دارند و برای موارد مختلف طراحی گرافیکی استفاده میشوند.
1. استفاده از تگ canvas
تگ canvas یک سطح قابل رسم است که میتوانید از آن برای ایجاد گرافیکهای دینامیک، انیمیشنها، بازیها و دیگر طراحیهای گرافیکی استفاده کنید. این تگ خود بهتنهایی محتوا ندارد و برای کشیدن گرافیکها باید از JavaScript استفاده کنید.
ساختار کلی تگ canvas:
id: شناسهای برای دسترسی به canvas از طریق JavaScript.
- width و height: ابعاد canvas را مشخص میکند. اگر این ویژگیها مشخص نشوند، ابعاد پیشفرض 300x150 پیکسل خواهد بود.
مثال: کشیدن یک مستطیل روی 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.arc(200, 200, 50, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
- رسم خط:
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();
- نوشتن متن:
<!-- اشیاء گرافیکی در اینجا قرار میگیرند -->
</svg>
2. استفاده از تگ svg
تگ svg برای ایجاد گرافیکهای برداری (Vector Graphics) استفاده میشود. برخلاف canvas که یک سطح قابل رسم است، در svg میتوانید اشیاء گرافیکی مختلف را بهطور مستقیم در کد HTML تعریف کنید و از آنها استفاده کنید. این اشیاء میتوانند شامل خطوط، دایرهها، مستطیلها و متن باشند.
ساختار کلی تگ svg:
<!-- اشیاء گرافیکی در اینجا قرار میگیرند -->
</svg>
مثال: رسم یک دایره و مستطیل با SVG
<!-- رسم دایره -->
<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:
- رسم خط:
<line x1="50" y1="50" x2="200" y2="200" stroke="green" stroke-width="2"/>
</svg>
- رسم چندضلعی:
<polygon points="200,10 250,190 160,210" fill="purple"/>
</svg>
- نوشتن متن:
<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 برای گرافیکهای برداری و طراحیهای دقیق که بهراحتی قابل تغییر و دستکاری هستند استفاده کنید.
با انتخاب مناسب این دو ابزار، میتوانید گرافیکهای تعاملی و جذاب در صفحات وب خود ایجاد کنید.
