Canvas در HTML5

بهنام نوبخت · ۱۴۰۵/۶/۲۸

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

این مقاله را پس از یادگیری جاوا اسکریپت مطالعه نمایید!

Canvas چیست؟

canvas در HTML یک بوم برای رسم محتوای گرافیکی است.

به صورت ساده:

<canvas></canvas>

خود canvas به تنهایی تصویر یا شکل خاصی نمایش نمی‌دهد.

برای رسم روی آن معمولاً از JavaScript استفاده می‌کنیم.

یعنی:

HTML
   ↓
ایجاد Canvas

JavaScript
   ↓
رسم روی Canvas

ساخت یک Canvas ساده

ابتدا یک فایل HTML ایجاد کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>

<body>

    <canvas id="myCanvas"></canvas>

</body>

</html>

در اینجا:

<canvas id="myCanvas"></canvas>

یک Canvas ایجاد کرده‌ایم.

اما هنوز چیزی روی آن رسم نشده است.

تعیین اندازه Canvas

می‌توانیم اندازه Canvas را با ویژگی‌های width و height مشخص کنیم:

<canvas
    id="myCanvas"
    width="600"
    height="400">
</canvas>

در این مثال:

عرض = 600
ارتفاع = 400

است.

نکته مهم:

width و height اندازه واقعی سطح Canvas را مشخص می‌کنند و با اندازه ظاهری آن در CSS یکی نیستند.

فعلاً برای جلوگیری از سردرگمی، بهتر است اندازه Canvas را مستقیماً با همین ویژگی‌ها تعیین کنیم.

آیا Canvas خودش چیزی نمایش می‌دهد؟

خیر.

اگر فقط این کد را داشته باشیم:

<canvas
    id="myCanvas"
    width="600"
    height="400">
</canvas>

معمولاً یک صفحه خالی خواهیم داشت.

برای رسم باید از JavaScript استفاده کنیم.

دسترسی به Canvas با JavaScript

ابتدا Canvas را با id پیدا می‌کنیم:

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

حالا متغیر canvas به عنصر Canvas اشاره می‌کند.

دریافت Context

برای رسم روی Canvas باید یک Context دریافت کنیم.

برای رسم دوبعدی از:

getContext("2d")

استفاده می‌کنیم.

مثال:

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

const ctx = canvas.getContext("2d");

حالا:

canvas
   ↓
getContext("2d")
   ↓
ctx

و ctx ابزارهایی را در اختیار ما قرار می‌دهد که با آن‌ها می‌توانیم روی Canvas رسم کنیم.

اولین رسم روی Canvas

حالا می‌توانیم یک مستطیل رسم کنیم.

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

const ctx = canvas.getContext("2d");

ctx.fillRect(50, 50, 200, 100);

این دستور یک مستطیل ایجاد می‌کند.

پارامترهای fillRect عبارت‌اند از:

fillRect(x, y, width, height)

بنابراین:

ctx.fillRect(50, 50, 200, 100);

یعنی:

x = 50
y = 50
width = 200
height = 100

مختصات در Canvas

برای کار با Canvas باید با سیستم مختصات آن آشنا شویم.

نقطه شروع Canvas معمولاً:

(0, 0)

است.

و در گوشه بالا سمت چپ قرار دارد.

به صورت ساده:

(0,0)
  ┌──────────────────────→ X
  │
  │
  │
  │
  ↓
  Y

هرچه به سمت راست برویم، مقدار X بیشتر می‌شود.

هرچه به سمت پایین برویم، مقدار Y بیشتر می‌شود.

مثلاً:

(0,0)
(100,50)
(300,200)

هر کدام نقاط مختلفی روی Canvas هستند.

رسم مستطیل توپر

برای رسم یک مستطیل توپر:

ctx.fillRect(50, 50, 200, 100);

استفاده می‌کنیم.

مثال کامل:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>Canvas Example</title>
</head>

<body>

    <canvas
        id="myCanvas"
        width="600"
        height="400">
    </canvas>

    <script>

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

        const ctx = canvas.getContext("2d");

        ctx.fillRect(50, 50, 200, 100);

    </script>

</body>

</html>

اگر این فایل را در مرورگر باز کنید، یک مستطیل روی Canvas مشاهده خواهید کرد.

تغییر رنگ

به صورت پیش‌فرض، شکل با رنگ پیش‌فرض Context رسم می‌شود.

برای تغییر رنگ می‌توانیم از:

fillStyle

استفاده کنیم.

مثلاً:

ctx.fillStyle = "orange";

ctx.fillRect(50, 50, 200, 100);

حالا مستطیل نارنجی خواهد بود.

استفاده از رنگ‌های مختلف

می‌توانیم از نام رنگ:

ctx.fillStyle = "red";

یا کد Hex:

ctx.fillStyle = "#ff6600";

یا rgb:

ctx.fillStyle = "rgb(255, 102, 0)";

استفاده کنیم.

مثلاً:

ctx.fillStyle = "#ff6600";

ctx.fillRect(50, 50, 200, 100);

چند مستطیل با رنگ‌های مختلف

می‌توانیم چند شکل رسم کنیم:

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);

ctx.fillStyle = "blue";
ctx.fillRect(250, 50, 150, 100);

ctx.fillStyle = "green";
ctx.fillRect(150, 200, 150, 100);

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

مستطیل توخالی با `strokeRect`

برای رسم مستطیل بدون پر کردن داخل آن می‌توانیم از:

strokeRect()

استفاده کنیم.

مثال:

ctx.strokeRect(50, 50, 200, 100);

این دستور فقط حاشیه مستطیل را رسم می‌کند.

تغییر رنگ حاشیه

برای تغییر رنگ حاشیه از:

strokeStyle

استفاده می‌کنیم.

مثلاً:

ctx.strokeStyle = "blue";

ctx.strokeRect(50, 50, 200, 100);

تغییر ضخامت خط

برای تغییر ضخامت خطوط می‌توانیم از:

lineWidth

استفاده کنیم.

مثلاً:

ctx.lineWidth = 5;

ctx.strokeRect(50, 50, 200, 100);

حالا حاشیه مستطیل ضخیم‌تر خواهد بود.

پاک کردن یک قسمت از Canvas

برای پاک کردن بخشی از Canvas از:

clearRect()

استفاده می‌کنیم.

مثلاً:

ctx.clearRect(50, 50, 200, 100);

این دستور محدوده مشخص‌شده را پاک می‌کند.

ساختار آن:

clearRect(x, y, width, height)

است.

پاک کردن کل Canvas

اگر Canvas ما:

600 × 400

باشد:

ctx.clearRect(0, 0, 600, 400);

تمام سطح Canvas پاک می‌شود.

یک روش بهتر این است که اندازه را از خود Canvas بگیریم:

ctx.clearRect(
    0,
    0,
    canvas.width,
    canvas.height
);

رسم خط

برای رسم خطوط باید از مسیرها استفاده کنیم.

ابتدا:

beginPath();

سپس نقطه شروع را مشخص می‌کنیم:

moveTo();

و نقطه پایان را مشخص می‌کنیم:

lineTo();

در نهایت:

stroke();

را اجرا می‌کنیم.

مثال:

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(300, 200);

ctx.stroke();

توضیح مراحل رسم خط

کد زیر:

ctx.beginPath();

یک مسیر جدید ایجاد می‌کند.

سپس:

ctx.moveTo(50, 50);

نقطه شروع مسیر را مشخص می‌کند.

بعد:

ctx.lineTo(300, 200);

یک خط تا نقطه مشخص‌شده ایجاد می‌کند.

و:

ctx.stroke();

مسیر را روی Canvas رسم می‌کند.

تغییر رنگ خط

قبل از stroke می‌توانیم رنگ را تعیین کنیم:

ctx.strokeStyle = "red";

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(300, 200);

ctx.stroke();

تغییر ضخامت خط

ctx.lineWidth = 8;

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(300, 200);

ctx.stroke();

رسم چند خط

می‌توانیم چند خط را به یک مسیر اضافه کنیم:

ctx.beginPath();

ctx.moveTo(50, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.lineTo(50, 200);

ctx.stroke();

این کد شکلی شبیه مستطیل ایجاد می‌کند.

بستن مسیر با `closePath`

می‌توانیم مسیر را ببندیم:

ctx.beginPath();

ctx.moveTo(50, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.lineTo(50, 200);

ctx.closePath();

ctx.stroke();

closePath() مسیر را به نقطه شروع متصل می‌کند.

رسم شکل توپر با مسیر

می‌توانیم یک مسیر ایجاد کنیم و آن را پر کنیم.

مثلاً یک مثلث:

ctx.beginPath();

ctx.moveTo(300, 50);

ctx.lineTo(400, 200);

ctx.lineTo(200, 200);

ctx.closePath();

ctx.fill();

برای تعیین رنگ:

ctx.fillStyle = "orange";

ctx.beginPath();

ctx.moveTo(300, 50);
ctx.lineTo(400, 200);
ctx.lineTo(200, 200);

ctx.closePath();

ctx.fill();

رسم دایره

برای رسم دایره از:

arc()

استفاده می‌کنیم.

مثال:

ctx.beginPath();

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

ctx.stroke();

پارامترهای اصلی:

arc(x, y, radius, startAngle, endAngle)

در این مثال:

x = 300
y = 200
radius = 80

است.

دایره توپر

می‌توانیم دایره را پر کنیم:

ctx.fillStyle = "orange";

ctx.beginPath();

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

ctx.fill();

چرا `Math.PI * 2`؟

برای درک بهتر، یک دور کامل دایره برابر با:

360 درجه

است.

در JavaScript و Canvas، زاویه‌ها معمولاً بر اساس رادیان محاسبه می‌شوند.

یک دور کامل برابر است با:

2π

به همین دلیل می‌بینیم:

Math.PI * 2

فعلاً لازم نیست محاسبات رادیان را به شکل عمیق یاد بگیرید.

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

Math.PI * 2

استفاده می‌کنیم.

رسم متن

Canvas فقط برای شکل‌ها نیست.

می‌توانیم متن نیز رسم کنیم.

برای متن توپر:

fillText()

استفاده می‌کنیم.

مثال:

ctx.font = "30px Arial";

ctx.fillText(
    "سلام دنیا",
    100,
    100
);

تغییر فونت متن

با ویژگی:

font

می‌توانیم فونت و اندازه متن را مشخص کنیم.

مثلاً:

ctx.font = "30px Arial";

یا:

ctx.font = "bold 32px Arial";

تغییر رنگ متن

از fillStyle استفاده می‌کنیم:

ctx.fillStyle = "blue";

ctx.font = "30px Arial";

ctx.fillText(
    "آموزش Canvas",
    100,
    100
);

متن توخالی

برای رسم حاشیه متن می‌توانیم از:

strokeText()

استفاده کنیم.

مثال:

ctx.font = "40px Arial";

ctx.strokeText(
    "Canvas",
    100,
    100
);

یک مثال کامل

حالا یک Canvas ایجاد کنیم که شامل:

مستطیل
دایره
خط
متن

باشد.

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>Canvas Example</title>
</head>

<body>

    <canvas
        id="myCanvas"
        width="700"
        height="450">
    </canvas>

    <script>

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

        const ctx =
            canvas.getContext("2d");


        // مستطیل

        ctx.fillStyle = "orange";

        ctx.fillRect(
            50,
            50,
            200,
            100
        );


        // دایره

        ctx.fillStyle = "blue";

        ctx.beginPath();

        ctx.arc(
            450,
            100,
            60,
            0,
            Math.PI * 2
        );

        ctx.fill();


        // خط

        ctx.strokeStyle = "green";

        ctx.lineWidth = 5;

        ctx.beginPath();

        ctx.moveTo(50, 250);

        ctx.lineTo(600, 250);

        ctx.stroke();


        // متن

        ctx.fillStyle = "black";

        ctx.font = "30px Arial";

        ctx.fillText(
            "آموزش Canvas",
            250,
            350
        );

    </script>

</body>

</html>

Canvas و CSS چه تفاوتی دارند؟

یک نکته بسیار مهم:

Canvas برای رسم محتوای گرافیکی است.

CSS برای طراحی و ظاهر عناصر HTML است.

مثلاً اگر بخواهیم یک دکمه ایجاد کنیم:

<button>خرید</button>

بهتر است از HTML و CSS استفاده کنیم.

اما اگر بخواهیم روی یک سطح گرافیکی یک شکل رسم کنیم:

ctx.fillRect(...);

Canvas انتخاب مناسبی است.

Canvas یک تصویر معمولی نیست

ممکن است تصور کنیم:

<canvas>

مانند:

<img>

است.

اما تفاوت مهمی دارند.

img یک فایل تصویر را نمایش می‌دهد:

<img src="image.jpg" alt="تصویر">

اما Canvas یک سطح رسم ایجاد می‌کند:

<canvas></canvas>

و JavaScript می‌تواند روی آن رسم کند.

Canvas و JavaScript

Canvas بدون JavaScript کاربردهای محدودی دارد.

در پروژه‌های واقعی معمولاً ترکیب زیر را می‌بینیم:

HTML
 ↓
Canvas

JavaScript
 ↓
رسم و کنترل گرافیک

مثلاً:

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

const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(50, 50, 100, 100);

آیا Canvas فقط برای بازی است؟

خیر.

Canvas کاربردهای بسیار زیادی دارد.

برای مثال:

البته هر پروژه گرافیکی الزاماً نباید با Canvas ساخته شود.

Canvas در پروژه واقعی

فرض کنید می‌خواهیم یک ابزار امضای دیجیتال بسازیم.

کاربر با ماوس یا صفحه لمسی روی Canvas حرکت می‌کند و JavaScript مسیر حرکت را روی Canvas رسم می‌کند.

به شکل ساده:

کاربر
  ↓
حرکت ماوس / لمس صفحه
  ↓
JavaScript
  ↓
Canvas
  ↓
رسم خط

در این مرحله هنوز وارد ساخت چنین پروژه‌ای نمی‌شویم؛ هدف ما یادگیری اصول Canvas است.

یک نکته مهم درباره اندازه Canvas

به این کد توجه کنید:

<canvas
    width="600"
    height="400">
</canvas>

این اندازه واقعی Canvas را مشخص می‌کند.

اما اگر فقط با CSS بنویسیم:

canvas {
    width: 600px;
    height: 400px;
}

اندازه ظاهری Canvas تغییر می‌کند، نه لزوماً اندازه داخلی آن.

این موضوع می‌تواند باعث تغییر مقیاس و کاهش کیفیت رسم شود.

فعلاً بهترین کار برای تمرین این است که اندازه Canvas را با:

width
height

مشخص کنیم.

پاک کردن و رسم دوباره

یکی از کاربردهای مهم clearRect زمانی است که می‌خواهیم Canvas را دوباره رسم کنیم.

مثلاً:

ctx.clearRect(
    0,
    0,
    canvas.width,
    canvas.height
);

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

این مفهوم در پروژه‌های تعاملی و بازی‌ها اهمیت زیادی دارد.

یک مثال ساده از رسم دوباره

function draw() {

    ctx.clearRect(
        0,
        0,
        canvas.width,
        canvas.height
    );

    ctx.fillStyle = "orange";

    ctx.fillRect(
        100,
        100,
        150,
        100
    );
}

draw();

در آینده با JavaScript پیشرفته‌تر می‌توانیم این مفهوم را برای انیمیشن استفاده کنیم.

تمرین عملی اول

یک Canvas با اندازه زیر بسازید:

600 × 400

سپس:

یک مستطیل رسم کنید.
رنگ آن را تغییر دهید.
یک مستطیل توخالی نیز ایجاد کنید.
ضخامت حاشیه آن را تغییر دهید.

تمرین عملی دوم

در Canvas یک مثلث رسم کنید.

راهنمایی:

ctx.beginPath();

ctx.moveTo(...);

ctx.lineTo(...);

ctx.lineTo(...);

ctx.closePath();

ctx.stroke();

سپس نسخه توپر آن را نیز ایجاد کنید.

تمرین عملی سوم

یک دایره رسم کنید و:

رنگ آن را تغییر دهید.
حاشیه آن را تغییر دهید.
اندازه آن را تغییر دهید.
محل آن را روی Canvas تغییر دهید.

تمرین عملی چهارم

یک متن روی Canvas بنویسید:

بنو سرویس

سپس:

اندازه فونت را تغییر دهید.
رنگ را تغییر دهید.
متن را به نقطه دیگری منتقل کنید.
یک متن انگلیسی نیز امتحان کنید.

چالش

یک صفحه HTML ایجاد کنید که Canvas در آن قرار داشته باشد.

روی Canvas موارد زیر را رسم کنید:

┌──────────────────────────────┐
│                              │
│     یک مستطیل                │
│                              │
│              یک دایره        │
│                              │
│  یک خط                       │
│                              │
│         Canvas               │
│                              │
└──────────────────────────────┘

شرایط:

حداقل دو رنگ استفاده کنید.
ضخامت یکی از خطوط را تغییر دهید.
یک متن اضافه کنید.
حداقل یک شکل توخالی داشته باشید.
حداقل یک شکل توپر داشته باشید.

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

canvas یک سطح برای رسم گرافیکی ایجاد می‌کند.
Canvas به تنهایی محتوای گرافیکی ایجاد نمی‌کند.
برای رسم معمولاً از JavaScript استفاده می‌کنیم.
getContext("2d") برای دریافت Context دوبعدی استفاده می‌شود.
Canvas دارای سیستم مختصات است.
نقطه (0, 0) در گوشه بالا سمت چپ قرار دارد.
fillRect() برای رسم مستطیل توپر است.
strokeRect() برای رسم حاشیه مستطیل است.
clearRect() برای پاک کردن یک قسمت از Canvas است.
beginPath() یک مسیر جدید ایجاد می‌کند.
moveTo() نقطه شروع مسیر را مشخص می‌کند.
lineTo() مسیر را به نقطه دیگری ادامه می‌دهد.
stroke() مسیر را رسم می‌کند.
fill() مسیر را به صورت توپر رسم می‌کند.
arc() برای رسم قوس و دایره استفاده می‌شود.
fillText() برای رسم متن توپر است.
strokeText() برای رسم حاشیه متن است.
fillStyle رنگ قسمت‌های توپر را مشخص می‌کند.
strokeStyle رنگ خطوط و حاشیه‌ها را مشخص می‌کند.
lineWidth ضخامت خطوط را تعیین می‌کند.
Canvas با CSS یکسان نیست و کاربرد متفاوتی دارد.

جمع‌بندی

Canvas یکی از قابلیت‌های قدرتمند HTML5 برای کار با گرافیک دوبعدی است. با خود HTML عنصر canvas را ایجاد می‌کنیم و سپس با JavaScript و Context دوبعدی می‌توانیم روی آن شکل‌های مختلف رسم کنیم. در این مقاله با مفاهیم پایه‌ای مانند سیستم مختصات، مستطیل، خط، دایره، مسیرها، رنگ‌ها و متن آشنا شدیم.

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

در مقاله بعدی به سراغ SVG در HTML5 می‌رویم و با یک روش متفاوت برای ساخت و نمایش گرافیک‌های برداری آشنا می‌شویم. سپس تفاوت SVG و Canvas را نیز بررسی خواهیم کرد.

مقاله بعدی: «SVG در HTML5»

۱۰

نظرات

هنوز نظری ثبت نشده است.

Canvas در HTML5

Canvas چیست؟

ساخت یک Canvas ساده

تعیین اندازه Canvas

آیا Canvas خودش چیزی نمایش می‌دهد؟

دسترسی به Canvas با JavaScript

دریافت Context

اولین رسم روی Canvas

مختصات در Canvas

رسم مستطیل توپر

تغییر رنگ

استفاده از رنگ‌های مختلف

چند مستطیل با رنگ‌های مختلف

مستطیل توخالی با strokeRect

تغییر رنگ حاشیه

تغییر ضخامت خط

پاک کردن یک قسمت از Canvas

پاک کردن کل Canvas

رسم خط

توضیح مراحل رسم خط

تغییر رنگ خط

تغییر ضخامت خط

رسم چند خط

بستن مسیر با closePath

رسم شکل توپر با مسیر

رسم دایره

دایره توپر

چرا Math.PI * 2؟

رسم متن

تغییر فونت متن

تغییر رنگ متن

متن توخالی

یک مثال کامل

Canvas و CSS چه تفاوتی دارند؟

Canvas یک تصویر معمولی نیست

Canvas و JavaScript

آیا Canvas فقط برای بازی است؟

Canvas در پروژه واقعی

یک نکته مهم درباره اندازه Canvas

پاک کردن و رسم دوباره

یک مثال ساده از رسم دوباره

تمرین عملی اول

تمرین عملی دوم

تمرین عملی سوم

تمرین عملی چهارم

چالش

نکات مهم این مقاله

جمع‌بندی

نظرات

مستطیل توخالی با `strokeRect`

بستن مسیر با `closePath`

چرا `Math.PI * 2`؟