جلسه چهل و ششم: آموزش کامل تگ canvas در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ canvas رو مثل یه حرفه‌ای یاد بگیری! تگ <canvas> یکی از باحال‌ترین ابزارای HTML5ـه که باهاش می‌تونی هرچی دلت می‌خواد روی صفحه وب بکشی؛ از خط و دایره گرفته تا عکس و انیمیشن‌های پیچیده.
در واقع <canvas> یه بوم نقاشی دیجیتالیه که با جاوااسکریپت کنترلش می‌کنی. می‌خوای نمودار بسازی؟ بازی دو‌بعدی؟ یا افکتای خفن گرافیکی؟ همه‌ش شدنیه! تو این مقاله، از صفر تا صد تگ <canvas> رو با مثال‌های باحال، نکات خفن، ترفندهای سئو، و بهینه‌سازی دسترسی‌پذیری یاد می‌گیری تا بتونی گرافیک‌های وب‌سایتت رو بترکونی. آماده‌ای؟ بزن بریم!

🏷️ تگ canvas چیه و چرا مهمه؟

تگ <canvas> یه عنصر HTML5 هست که یه ناحیه مستطیلی برای طراحی گرافیکی تعریف می‌کنه. این تگ به‌تنهایی هیچی نمایش نمی‌ده و نیاز به جاوااسکریپت داره تا محتوا روش رندر بشه. با <canvas> می‌تونی از یه خط ساده تا انیمیشن‌های پیچیده و بازی‌های 2D و 3D خلق کنی. چرا مهمه؟ چون:

• انعطاف‌پذیری بی‌نهایت: از رسم اشکال ساده تا ساخت بازی‌های پیشرفته، همه‌چیز ممکنه.
• عملکرد بالا: برای رندرینگ گرافیک‌های پویا بهینه‌ست و سرعت فوق‌العاده‌ای داره.
• کاربرد گسترده: تو وب‌اپ‌ها، بازی‌ها، ابزارهای ویرایش تصویر، و دیتا ویژوال استفاده می‌شه.
• دسترسی‌پذیری و سئو: با تکنیک‌های درست، می‌تونی <canvas> رو برای موتورهای جستجو و کاربران با نیازهای ویژه بهینه کنی.
• پشتیبانی گسترده: همه مرورگرهای مدرن مثل Chrome، Firefox، Safari، و Edge ازش پشتیبانی می‌کنن.

مثلاً، اگه بخوای یه نمودار فروش پویا یا یه بازی ساده مثل Snake بسازی، <canvas> بهترین ابزارته!

🧱 ساختار تگ canvas: ساده اما بی‌نهایت قدرتمند!

تگ <canvas> یه تگ جفتیه که ساختار ساده‌ای داره. به‌تنهایی فقط یه بوم خالیه، اما با جاوااسکریپت زنده می‌شه:

<canvas id="myCanvas" width="500" height="300">
    مرورگر شما از canvas پشتیبانی نمی‌کنه. لطفاً از یه مرورگر مدرن استفاده کنید.
</canvas>

• اتریبیوت‌های کلیدی:
  • id: برای دسترسی به <canvas> با جاوااسکریپت.
  • width: عرض بوم به پیکسل (پیش‌فرض 300).
  • height: ارتفاع بوم به پیکسل (پیش‌فرض 150).
• نکته مهم: همیشه width و height رو با اتریبیوت‌های HTML تنظیم کن، نه CSS. اگه با CSS اندازه بدی، ممکنه تصویر کشیده یا فشرده بشه.
• محتوای داخل تگ: فقط وقتی مرورگر از <canvas> پشتیبانی نکنه نمایش داده می‌شه، پس یه پیام جایگزین بنویس.

خفن نیست؟ این ساختار ساده به تو اجازه می‌ده با چند خط کد، گرافیک‌های شگفت‌انگیز بسازی!

🧩 اتریبیوت های تگ canvas

✨ نکته: در صورتی که مقادیر width و height مشخص نکنی، اندازه پیش‌فرض تگ 300×150 پیکسل خواهد بود.

💡 کاربردهای تگ <canvas>: کجا بترکونیمش?

تگ <canvas> برای این موارد غوغا می‌کنه:

• گرافیک‌های تعاملی: نقشه‌های تعاملی، ابزارهای طراحی، یا داشبوردهای داده.
• انیمیشن‌های وب: افکت‌های متحرک، لوگوهای پویا، یا جلوه‌های بصری.
• بازی‌های تحت وب: بازی‌های 2D مثل Snake یا حتی 3D با WebGL.
• نمودارها و دیتا ویژوال: گراف‌ها، چارت‌ها، و نمایش داده‌های پویا.
• ویرایش تصویر: ابزارهایی برای برش، فیلتر، یا ویرایش تصاویر.

📝 مثال‌های عملی: تگ canvas رو تو عمل ببین!

بیا چند نمونه باحال ببینیم که نشون می‌دن <canvas> چطور کار می‌کنه:

✨ رسم مستطیل ساده:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#ff6347';
    ctx.fillRect(20, 20, 160, 60);
    ctx.strokeStyle = '#000';
    ctx.strokeRect(20, 20, 160, 60);
</script>

نتیجه کد بالا به صورت زیر نمایش داده می‌شه:

✨ رسم دایره با گرادیانت:

<canvas id="circleCanvas" width="200" height="200"></canvas>
<script>
    const canvas = document.getElementById('circleCanvas');
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 80);
    gradient.addColorStop(0, '#83b735');
    gradient.addColorStop(1, '#4CAF50');
    ctx.beginPath();
    ctx.arc(100, 100, 80, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
</script>

نتیجه کد بالا به صورت زیر نمایش داده می‌شه:

🆚 مقایسه با SVG: کدوم بهتره؟

تگ <canvas> و SVG هر دو برای گرافیک وب عالی‌ان، ولی تفاوت‌های مهمی دارن:

کی از کدوم استفاده کنیم؟

• <canvas> برای پروژه‌های پویا و سنگین مثل بازی‌ها یا ابزارهای ویرایش تصویر.
• SVG برای گرافیک‌های ثابت یا ساده مثل آیکون‌ها و لوگوها.

🚀 تأثیر تگ <canvas> در سئو

تگ <canvas> به‌طور مستقیم روی رتبه گوگل اثر نداره، ولی با ایجاد محتوای گرافیکی و تعاملی مثل نمودار، انیمیشن یا بازی، تجربه کاربر رو بهبود میده. این یعنی افزایش زمان موندن کاربر در صفحه، کاهش نرخ پرش، و جذب بک‌لینک طبیعی از سایت‌های دیگه.
فقط حواست باشه که موتورهای جست‌وجو محتوای داخل <canvas> رو نمی‌خونن، پس حتما متن یا توضیح جایگزین (Fallback) و تصویر نمونه براش بذار تا سئو و دسترس‌پذیری حفظ بشه.

❓ سوالای رایج

🔹 میشه با <canvas> بازی ساخت؟
آره، کلی بازی دو‌بعدی باهاش ساخته شده.

🔹 چطور <canvas> رو ریسپانسیو کنیم؟
می‌تونی با CSS یا جاوااسکریپت اندازه‌ش رو بر اساس صفحه کاربر تغییر بدی.

🏁 جمع‌بندی

تگ <canvas> یه دنیای بی‌نهایت برای خلاقیت بهت می‌ده. از یه خط ساده تا یه بازی کامل رو می‌تونی توش پیاده کنی. فقط کافیه شروع کنی و با کد بازی کنی. حالا تگ <canvas> رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با <canvas> می‌تونی انیمیشن‌ها، بازی‌ها، و گرافیک‌های پویا تو وب خلق کنی، تجربه کاربرات رو به اوج برسونی، پس معطل نکن! یه <canvas> بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ <canvas> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.