Canvas چیست؟ (شروع کار با canvas و مثال‌های کاربردی)

سرفصل‌های مقاله

تاریخچه Canvas
تگ Canvas در HTML چیست؟
شروع کار با Canvas
ارتقای مهارت‌های HTML با Canvas
مقایسه Canvas و SVG
سوالات متداول
جمع‌بندی

تصور کن یک روز بارانی و سرد زمستانی، پشت کامپیوترت نشستی و به فکر طراحی یک بازی آنلاین هیجان‌انگیز هستی. همه چیز رو آماده کردی اما وقتی می‌خوای بازی رو به بقیه نشون بدی، یک مشکلی بزرگ وجود داره: چطور باید این بازی رو به صورت گرافیکی در مرورگر نمایش بدی؟ اونجاست که Canvas وارد ماجرا می‌شه و مشکل رو حل می‌کنه!

در دوران اولیه وب، همه چیز ساده و ثابت بود. صفحات وب پر از متن و تصاویر ثابت بودند و تعامل چندانی با کاربر نداشتند. اما با گذر زمان، نیاز به تعامل بیشتر و نمایش محتوای گرافیکی پویا بیشتر شد. اگر Canvas و ابزارهای مشابه وجود نداشتن، امروز ممکن بود خیلی از کارهای گرافیکی رو نتونیم به راحتی انجام بدیم. تصور کن بدون این ابزارها چقدر سخت می‌شد انیمیشن‌های پویا بسازیم، بازی‌های جذاب طراحی کنیم یا حتی داده‌های پیچیده رو به صورت گرافیکی نمایش بدیم.

تاریخچه Canvas

Canvas اولین بار توسط اپل در سال 2004 معرفی شد و به مرور زمان به استانداردهای وب اضافه شد. این تگ به توسعه‌دهندگان اجازه می‌ده تا با استفاده از جاوااسکریپت، گرافیک‌های پیچیده و انیمیشن‌ها رو در صفحات وب ایجاد کنن. با گسترش استفاده از این تگ، امکانات بیشتری به اون اضافه شد و امروز یکی از ابزارهای قدرتمند توسعه‌دهندگان وبه.

مشکلات قبل از معرفی Canvas

قبل از معرفی Canvas، توسعه‌دهندگان برای ایجاد گرافیک‌های پویا و تعاملات گرافیکی با مشکلات زیادی مواجه بودند. یکی از روش‌های متداول استفاده از پلاگین‌های خارجی مثل Flash بود که مشکلاتی مثل ناسازگاری با دستگاه‌های مختلف و نیاز به نصب پلاگین رو به همراه داشت. این روش‌ها نه تنها پیچیده بودند بلکه بار اضافی رو هم به مرورگرها تحمیل می‌کردند.

تگ Canvas در HTML چیست؟

همونطور که گفتیم تگ Canvas یه روش فوق‌العاده برای ساختن تصاویر و گرافیک‌های جذاب با HTML و جاوااسکریپته. با استفاده از تگ <canvas> می‌تونی یه بوم نقاشی توی صفحه وب‌ات بسازی. تصاویر روی Canvas می‌تونن حرکت کنن و با کاربر تعامل داشته باشن، که این ویژگی‌ها اونا رو برای ساخت اینفوگرافیک‌ها، نمایش داده‌ها، انیمیشن‌ها و حتی بازی‌های ساده ایده‌آل می‌کنه.

برای اینکه بتونی روی Canvas نقاشی کنی، باید از جاوااسکریپت استفاده کنی. این ممکنه اولش یه کم سخت به نظر بیاد، چون نیاز به فهمیدن برنامه‌نویسی داره، ولی نگران نباش! وقتی یاد بگیری، می‌تونی چیزهای فوق‌العاده‌ای بسازی که برای خودت هم جذاب باشه. با Canvas می‌تونی محتوای متحرک و تعاملی بی‌نهایتی ایجاد کنی.

وقتی کار با Canvas رو یاد بگیری، تبدیل به یه ابزار قدرتمند برای ساختن وب‌سایت‌های جذاب و تعاملی می‌شه. موضوعات زیادی در مورد Canvas هست که توی یه مقاله جا نمی‌شه، پس فعلاً بیایید با اصول اولیه شروع کنیم و کم‌کم پیش بریم. آماده‌ای؟ بزن بریم!

شروع کار با Canvas

حالا که فهمیدیم Canvas چقدر مهمه، بیایید ببینیم چطور می‌تونیم با اون کار کنیم. Canvas به تنهایی هیچ چیزی نمایش نمی‌ده، اما با استفاده از جاوااسکریپت می‌تونیم بهش قدرت بدیم و هر چیزی که می‌خوایم رو رسم کنیم.

ساختار ابتدایی Canvas

اولین قدم برای استفاده از Canvas، اضافه کردن اون به کد HTML هست:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
    </script>
</body>
</html>

توی این مثال ساده، یک Canvas با عرض و ارتفاع مشخص تعریف کردیم و با استفاده از جاوااسکریپت، یک context دو بعدی از اون گرفتیم که به ما اجازه می‌ده روی اون رسم کنیم. در ادامه مثال‎‌هامونو روی همین Canvas ادامه میدیم و فقط ادامه کدهای JS رو خواهیم داشت.

رسم خط

اولین چیزی که قراره بکشیم، یه خط مستقیم و ساده است. ولی قبل از اینکه بخوایم خط بکشیم (یا هر شکل دیگه‌ای)، باید بفهمیم که سیستم مختصات در Canvas چطوری کار می‌کنه.

یک Canvas یک شبکه دوبعدی از پیکسل‌هاست. هر پیکسل در این شبکه با یک جفت مختصات X و Y مشخص می‌شه. مثلاً Canvas ما در بالا ۳۰۰ در ۲۰۰ پیکسل هست. گوشه بالایی سمت چپ مختصات (0, 0) داره و گوشه پایین سمت راست مختصات (300, 200).

برای رسم یک خط با استفاده از مختصات، از سه متد استفاده می‌کنیم. اول، moveTo() جایی که خط شروع می‌شه رو مشخص می‌کنه. بعد، lineTo() جایی که خط تموم می‌شه رو مشخص می‌کنه. در نهایت، متد stroke() خط رو رسم می‌کنه.

context.moveTo(20, 20);
context.lineTo(280, 180);
context.stroke();

رسم مستطیل

بعضی از طرفداران هندسه ممکنه بگن که خط واقعاً یک "شکل" نیست. قبول! بیایید یک مستطیل بکشیم. برای این کار از متد rect() استفاده می‌کنیم. این متد چهار پارامتر می‌گیره: مختصات X و Y گوشه بالایی سمت چپ، عرض مستطیل به پیکسل و ارتفاع مستطیل به پیکسل.

context.rect(20, 20, 200, 150);

بعد از rect()، دوباره از متد stroke() استفاده می‌کنیم تا مستطیل رو بکشیم.

context.rect(20, 20, 200, 150);
context.stroke();

یا، برای پر کردن مستطیل، از متد fill() به جای stroke استفاده می‌کنیم.

همچنین می‌تونیم از متد fillRect() برای رسم یک مستطیل پر شده استفاده کنیم که همان پارامترهای rect() رو می‌گیره. این متد به طور پیش‌فرض یک مستطیل سیاه رنگ ایجاد می‌کنه. نیازی به استفاده از متدهای stroke() یا fill() نیست. برای تغییر رنگ مستطیل، ابتدا از خاصیت fillStyle استفاده کن، همون‌طور که در زیر نشون داده شده:

context.fillStyle = "red";
context.fillRect(20, 20, 200, 150);

رسم دایره

حالا بیایید یه دایره بکشیم. برای این کار در Canvas از متد arc() استفاده می‌کنیم. با arc می‌تونید مختصات X و Y مرکز، شعاع دایره، زاویه شروع (به رادیان) و زاویه پایان دایره رو مشخص کنید.

چون می‌خوایم دایره کامل باشه، زاویه شروع رو به 0 و زاویه پایان رو به 2*pi رادیان تنظیم می‌کنیم.

context.arc(100, 100, 50, 0, 2 * Math.PI);

بعد از اون، از متد stroke() یا fill() برای کشیدن دایره استفاده می‌کنیم. این بار از fill() استفاده می‌کنیم:

context.fillStyle = "red";
context.arc(100, 100, 50, 0, 2*Math.PI);
context.fill();

رسم اشکال با Pathها

در Canvas، یک Path محدوده‌ای از شکل هست که با روش‌های مختلف ساخته می‌شه. با Pathها، محدود به مستطیل‌ها و دایره‌های ساده نیستید - می‌تونید هر نوع شکل دو بعدی که می‌خواید رو ایجاد کنید.

برای رسم یک شکل با Pathها، از متدهای زیر استفاده کنید:

beginPath(): اعلام می‌کنه که می‌خواید یک شکل جدید بسازید.
moveTo(): یک Path رو به یک جفت مختصات خاص منتقل می‌کنه بدون اینکه خط بکشه.
lineTo(): از نقطه قبلی روی Path به یک جفت مختصات خاص خط می‌کشه.
arc(): یک خط منحنی ایجاد می‌کنه.
closePath(): اعلام می‌کنه که کشیدن شکل فعلی تموم شده.
fill(): محدوده Path فعلی رو پر می‌کنه.
stroke(): خطوطی که نقاط در Path فعلی رو به هم وصل می‌کنن می‌کشه.

وقتی Path رو می‌سازید، مثل اینه که دارید چیزی رو روی کاغذ فیزیکی می‌کشید. هر تابع مثل اینه که قلمت رو از یک نقطه به نقطه دیگه هدایت می‌کنی.

context.fillStyle = "orange";
context.beginPath();
context.moveTo(108, 0.0);
context.lineTo(141, 70);
context.lineTo(218, 78.3);
context.lineTo(162, 131);
context.lineTo(175, 205);
context.lineTo(108, 170);
context.lineTo(41.2, 205);
context.lineTo(55, 131);
context.lineTo(1, 78);
context.lineTo(75, 68);
context.lineTo(108, 0);
context.closePath();
context.fill();

ایجاد متن

ایجاد متن در Canvas HTML هم خیلی آسونه. می‌تونید از متد fillText() (برای متن پر شده) یا strokeText() (برای متن بدون پر شدن) استفاده کنید. هر دو متد نیاز دارند که متن و همچنین مختصات X و Y ناحیه متن رو مشخص کنید.

context.fillText("This is filled-in text.", 10, 40);
context.strokeText("This is not filled in.", 10, 80);

می‌تونید خانواده فونت، اندازه و سایر استایل‌های متن رو با خاصیت font تنظیم کنید، همون‌طور که در زیر نشون داده شده:

context.font = "30px Arial";
context.fillText("This is filled-in text.", 10, 40);
context.strokeText("This is not filled in.", 10, 80);

برای افزودن رنگ به متن، از خاصیت‌های fillStyle یا strokeStyle استفاده کنید.

context.font = "30px Arial";
context.fillStyle = "Red";
context.strokeStyle = "Red";
context.fillText("This is filled-in text.", 10, 40);
context.strokeText("This is not filled in.", 10, 80);

افزودن گرادیانت به اشکال

گرادیانت‌های رنگی یکی دیگه از افکت‌های جذاب در Canvas هستن. دو نوع گرادیانت وجود داره که می‌تونید بسازید: گرادیانت خطی و گرادیانت شعاعی.

برای ایجاد یک گرادیانت خطی، از متد createLinearGradient() استفاده کنید و اون رو به یک متغیر گرادیانت جدید اختصاص بدید. این متد چهار پارامتر می‌گیره: مختصات X و Y شروع گرادیانت، و مختصات X و Y پایان گرادیانت.

var gradient = context.createLinearGradient(0, 0, 300, 0);

تنظیم این اعداد زاویه گرادیانت رو داخل شکل تغییر می‌ده.

بعد، دو توقف رنگ با متد addColorStop() اضافه می‌کنیم. این توقف‌ها رنگ شروع و رنگ پایان گرادیانت رو تنظیم می‌کنن. با این متد، ابتدا موقعیت رنگ در گرادیانت (مقداری بین 0 و 1) و بعد رنگ رو مشخص می‌کنیم. رنگ اول به طور صاف به رنگ دوم بین توقف‌ها تبدیل می‌شه.

gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");

در نهایت، شکل خود رو می‌کشیم و این گرادیانت رو با تنظیم خاصیت fillStyle به متغیر گرادیانت، به شکل اعمال می‌کنیم.

context.rect(20, 20, 200, 150);
context.fillStyle = gradient;
context.fill();

ساختن یک گرادیانت شعاعی هم مشابه گرادیانت خطیه. برای ساخت یک گرادیانت شعاعی از متد createRadialGradient() استفاده می‌کنیم. سه پارامتر اول مختصات X و Y و شعاع دایره داخلی گرادیانت هستن، و سه پارامتر بعدی مختصات X و Y و شعاع دایره بیرونی گرادیانت.

var gradient = context.createRadialGradient(120, 95, 10, 120, 95, 100);

بعد، مثل گرادیانت خطی، توقف رنگ اضافه می‌کنیم:

gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");

در نهایت، شکل رو رسم می‌کنیم و گرادیانت شعاعی رو به شکل اختصاص می‌دیم.

context.rect(20, 20, 200, 150);
context.fillStyle = gradient;
context.fill();

افزودن تصاویر

در نهایت، بیایید یه تصویر روی Canvas بذاریم. استفاده از تصاویر در Canvas HTML به جای تگ <img> معمولی این مزیت رو داره که می‌تونید به تصاویر انیمیشن بدید و اونا رو توی طرح‌های Canvas به کار ببرید.

برای قرار دادن یک تصویر، یک متغیر به نام image با استفاده از متد getElementById() ایجاد کنید، سپس از متد drawImage() برای قرار دادن تصویر داخل Canvas استفاده کنید. drawImage() سه پارامتر الزامی داره: شناسه تصویر در صفحه، و مختصات X و Y گوشه بالایی سمت چپ تصویر. می‌تونید عرض و ارتفاع تصویر رو هم به عنوان پارامترهای اختیاری اضافه کنید.

var image = document.getElementById("mountains");
context.drawImage(image, 0, 0, 300, 200);

ارتقای مهارت‌های HTML با Canvas

یادگیری Canvas مثل به دست آوردن یک ابرقدرت در HTML می‌مونه. شاید بعد از کشیدن چند خط و دایره به نظر نرسه، ولی با کمی ترفندهای جاوااسکریپت، امکان‌های بی‌پایانی برای ایجاد تجربه‌های مرور منحصر به فرد و جذاب رو فراهم می‌کنه. دفعه بعدی که توی یه وب‌سایت با گرافیک تعاملی یا نمایش داده‌های جذاب مواجه شدی، احتمالاً HTML Canvas داره همه کارها رو انجام می‌ده.

حالا که با اصول اولیه آشنا شدی، آماده‌ای یه سفر هیجان‌انگیزتر رو شروع کنی؟ تصور کن می‌تونی هر چیزی رو که توی ذهنت هست روی صفحه بیاری. از بازی‌های ساده گرفته تا نمودارهای پیچیده. با من همراه باش تا با Canvas و قدرت‌های بی‌پایانش بیشتر آشنا بشی.

ایجاد انیمیشن

انیمیشن‌ها بخش جذابی از کار با Canvas هستن. بیایید با یک مثال ساده شروع کنیم. فرض کن می‌خوایم یک دایره که به اطراف حرکت می‌کنه رو بسازیم:

<script>
    var x = 50;
    var y = 50;
    var dx = 2;
    var dy = 4;
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, 20, 0, Math.PI * 2, true);
        context.fillStyle = 'blue';
        context.fill();
        x += dx;
        y += dy;
        if (x > canvas.width || x < 0) {
            dx = -dx;
        }
        if (y > canvas.height || y < 0) {
            dy = -dy;
        }
    }
    setInterval(draw, 10);
</script>

تو این مثال، یک دایره داریم که با هر بار اجرای تابع draw، مختصاتش تغییر می‌کنه و باعث می‌شه دایره به اطراف حرکت کنه.

افزودن تعامل با کاربر

حالا بیایید کمی تعامل با کاربر رو به مثال‌هامون اضافه کنیم. فرض کن می‌خوایم وقتی کاربر روی Canvas کلیک می‌کنه، یک دایره در اون نقطه رسم بشه:

<script>
    canvas.addEventListener('click', function(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        context.beginPath();
        context.arc(x, y, 20, 0, Math.PI * 2, true);
        context.fillStyle = 'red';
        context.fill();
    });
</script>

توی این مثال، با استفاده از رویداد click مختصات کلیک کاربر رو می‌گیریم و یک دایره در اون نقطه رسم می‌کنیم.

مقایسه Canvas و SVG

وقتی می‌خوای گرافیک‌های جذاب توی وب بسازی، دو تا گزینه معروف داری: Canvas و SVG. هر کدوم از این‌ها ویژگی‌ها و کاربردهای خاص خودشون رو دارن و بسته به نیازت، ممکنه یکی بهتر از اون یکی باشه. بیایید ببینیم این دو تا چیا هستن و کجاها بهتر جواب می‌دن.

Canvas

تگ Canvas توی HTML رو گفتیم که بهت اجازه می‌ده با جاوااسکریپت گرافیک‌های دو بعدی و حتی سه بعدی بکشی. Canvas بیشتر برای انیمیشن‌ها، بازی‌ها و گرافیک‌هایی که باید مدام تغییر کنن، خیلی عالیه. توی Canvas هر چیزی که می‌کشی، پیکسل به پیکسل رندر می‌شه، پس برای کارهای گرافیکی پویا خیلی خوبه.

SVG

اما SVG (Scalable Vector Graphics) یه زبان مبتنی بر XML هست که برای توصیف گرافیک‌های دو بعدی استفاده می‌شه. برخلاف Canvas که پیکسلیه، SVG برداریه. این یعنی گرافیک‌های SVG هر چقدر هم بزرگ بشن، کیفیتشون رو از دست نمی‌دن. SVG برای نمودارها، آیکون‌ها و گرافیک‌های استاتیک یا گرافیک‌هایی که تعامل زیادی ندارن، خیلی خوبه.

جدول مقایسه Canvas و SVG

ویژگی	Canvas	SVG
نوع رندر	پیکسلی	برداری
نیاز به جاوااسکریپت	بله	خیر (می‌تونی با HTML و CSS هم استفاده کنی)
عملکرد	مناسب برای گرافیک‌های پویا و انیمیشن‌ها	مناسب برای گرافیک‌های استاتیک و مقیاس‌پذیر
کیفیت با تغییر اندازه	کیفیت کاهش می‌یابد	کیفیت ثابت می‌مونه
پیچیدگی در رسم	نیاز به برنامه‌نویسی داره	ساده‌تر، مبتنی بر XML
تعامل	قابلیت تعامل بالا با جاوااسکریپت	قابلیت تعامل متوسط با CSS و جاوااسکریپت
پشتیبانی مرورگرها	همه مرورگرهای مدرن	همه مرورگرهای مدرن

نکات کلیدی

Canvas: اگه می‌خوای انیمیشن‌ها، بازی‌ها یا گرافیک‌هایی بسازی که باید مدام به‌روزرسانی بشن، Canvas گزینه بهتریه.
SVG: اگه نیاز داری گرافیک‌هایی بسازی که با تغییر اندازه کیفیتشون رو از دست ندن، SVG بهترین انتخابه.

هر کدوم از این ابزارها برای کارای خاصی خوبن و انتخاب بین اونا بستگی به نیاز و نوع پروژه‌ات داره. با شناخت درست از این ابزارها، می‌تونی بهترین انتخاب رو برای پروژه‌هات داشته باشی.

سوالات متداول

1. Canvas چیست؟

Canvas در HTML یک عنصر است که به شما اجازه می‌دهد با استفاده از جاوااسکریپت گرافیک‌های دو بعدی و سه بعدی را رسم کنید.

2. چطور می‌تونم یک مستطیل در Canvas رسم کنم؟

برای رسم یک مستطیل در Canvas از متد fillRect استفاده می‌شود.

3. آیا Canvas فقط برای گرافیک دو بعدی است؟

خیر، با استفاده از WebGL می‌توانید گرافیک سه بعدی هم در Canvas رسم کنید.

4. چطور می‌تونم یک انیمیشن در Canvas ایجاد کنم؟

برای ایجاد انیمیشن در Canvas می‌توانید از تابع setInterval یا requestAnimationFrame استفاده کنید.

5. چطور می‌تونم تعامل با کاربر رو به Canvas اضافه کنم؟

می‌توانید با استفاده از رویدادهای جاوااسکریپت مثل click یا mousemove تعامل با کاربر رو به Canvas اضافه کنید.

6. چه مرورگرهایی از Canvas پشتیبانی می‌کنند؟

تقریباً همه مرورگرهای مدرن از Canvas پشتیبانی می‌کنند.

7. چطور می‌تونم متن رو در Canvas رسم کنم؟

برای رسم متن در Canvas از متد fillText استفاده می‌شود.

8. آیا می‌توانم تصویر رو در Canvas رسم کنم؟

بله، با استفاده از متد drawImage می‌توانید تصاویر رو در Canvas رسم کنید.

9. آیا Canvas جایگزین Flash شده؟

بله، Canvas به عنوان یک جایگزین مدرن و بدون نیاز به پلاگین برای Flash مطرح شده است.

10. چطور می‌تونم گرافیک‌های پیچیده‌تری در Canvas رسم کنم؟

با ترکیب متدهای مختلف Canvas و استفاده از کتابخانه‌های گرافیکی مثل Three.js می‌توانید گرافیک‌های پیچیده‌تری ایجاد کنید.

جمع‌بندی

Canvas یکی از ابزارهای قدرتمند HTML هست که به شما اجازه می‌ده گرافیک‌های پویا و تعاملی رو به صفحات وب خودتون اضافه کنید. از رسم اشکال ساده گرفته تا ایجاد انیمیشن‌های پیچیده، Canvas امکان‌پذیری‌های بی‌پایانی رو فراهم می‌کنه. با یادگیری این تگ، می‌تونید پروژه‌های وب خودتون رو به سطح جدیدی از خلاقیت و تعامل برسونید. دنیای وب منتظر خلاقیت‌های شماست!