در حال بارگذاری...

Canvas در HTML

درس قبل، SVG آیکون و شکل تیز را به‌صورت نشانه‌گذاری وکتور یا فایل .svg گذاشت. این درس canvas را معرفی می‌کند: جعبهٔ بیت‌مپ خالی که جاوااسکریپت رنگ می‌زند. HTML فقط سطح را می‌گذارد و اندازه می‌دهد؛ اسکریپت پیکسل می‌کشد. دامنه عملی است — عنصر + رسم ۲بعدی کوچک — نه کورس کامل Canvas API، بازی یا WebGL.

چرا canvas در کورس HTML

مبتدی canvas را در نمودار، بازی کوچک و پیش‌نمایش پویا می‌بیند. دانستن تقسیم کار کمک می‌کند: HTML مالک عنصر است؛ JS مالک پیکسل. بعد از گرافیک نشانه‌گذاری SVG، canvas ابزار رسم رایج دیگر مرورگر را نشان می‌دهد. اینجا فقط چند API کافی است — getContext("2d") و fillRect — برای اثبات ایده بدون غرق‌شدن در مسیر، تبدیل یا حلقهٔ انیمیشن.

پاسخ مستقیم

۱) <canvas id="…" width="…" height="…"> با متن جایگزین مفید داخل بگذارید. ۲) در جاوااسکریپت عنصر را بگیرید و getContext("2d") صدا بزنید. ۳) با متدهایی مثل fillStyle + fillRect(x, y, w, h) بکشید. ۴) ویژگی‌های width/height رزولوشن بیت‌مپ را تنظیم می‌کنند نه فقط اندازهٔ CSS. ۵) برای آیکون/لوگوی ساده SVG؛ وقتی پیکسل‌ها اغلب زیر کنترل اسکریپت عوض می‌شوند canvas. ۶) این درس مقدمه است؛ API عمیق جای دیگر.

📊 Canvas vs SVG for beginners

Topic	Canvas	SVG
Drawing model	Bitmap pixels via JavaScript	Vector shapes in markup (or .svg file)
Who paints	Scripts on a 2d (or other) context	Browser renders SVG tree
Best beginner fit	Dynamic charts, games, freehand	Icons, logos, sharp UI marks
Scales when resized	Can blur if only CSS-stretched	Stays sharp as vectors
Accessible naming	Label the canvas; drawings are pixels	alt / aria-label on meaningful graphics
This course depth	Element + tiny 2d draw	Embed inline or via img

عنصر canvas کوچک

Canvas بدون اسکریپت یک مستطیل خالی است (به‌علاوه متن جایگزین). کار HTML اعلام اندازه و id است تا اسکریپت پیدا کند — همان عادت قلاب مثل id روی کنترل فرم.

Canvas shell with fallback

html

<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>

خواندن پوسته

<canvas> سطح رسم را در صفحه می‌سازد
width و height اندازهٔ بیت‌مپ داخلی را می‌گذارند
id اجازه می‌دهد جاوااسکریپت این canvas را یکتا پیدا کند
متن بین تگ‌ها جایگزین وقتی رسم در دسترس نیست
CSS می‌تواند جعبهٔ نمایش را عوض کند؛ ناهمخوانی با ویژگی‌ها ممکن است بیت‌مپ را بکشد/تار کند
برخلاف SVG، شکل فرزند در HTML نیست — رسم در اسکریپت است

رسم مستطیل با زمینهٔ ۲بعدی

بعد از پوسته، اسکریپت کوتاه رنگ می‌زند. getContext("2d") API رایج ۲بعدی را برمی‌گرداند؛ fillRect مستطیل هم‌محور را پر می‌کند. همین برای دیدن کار canvas کافی است.

Canvas plus fillRect

html

<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>

خواندن فراخوانی‌های رسم

getElementById("c") canvas را پیدا می‌کند
getContext("2d") API رسم ۲بعدی را باز می‌کند
fillStyle رنگ پر را قبل از نقاشی می‌گذارد
fillRect(x, y, width, height) مستطیل را در مختصات canvas پر می‌کند (مبدأ بالا-چپ)
بدون اسکریپت فقط متن جایگزین — HTML alone جعبهٔ آبی را نمی‌کشد
درس اختیاری بعد گرافیک را ترک می‌کند؛ web storage به ذخیرهٔ داده در مرورگر برمی‌گردد

انتخاب canvas در برابر SVG

لوگو/آیکون ثابت که باید تیز بماند: SVG (درس قبل)
پیکسل‌هایی که اغلب به‌روز می‌شوند: canvas
شکل‌ها به‌عنوان DOM برای استایل CSS: اغلب SVG
فکر «این ناحیهٔ پیکسل را رنگ کن»: canvas
نشان ساده کنار عنوان: معمولاً SVG کمتر کار است
انیمیشن مسیر کامل، WebGL یا موتور بازی: فراتر از این مقدمه HTML

تمرین — canvas روی صفحه

پوستهٔ canvas را بچسبانید؛ جعبهٔ خالی (یا جایگزین) را ببینید.
اسکریپت را اضافه کنید؛ مستطیل آبی را تأیید کنید.
fillStyle و اعداد fillRect را عوض کنید؛ با رفرش بکشید.
موقتاً <script> را بردارید — شکل‌ها می‌روند؛ فقط جایگزین می‌ماند.
فقط با CSS اندازه را بکشید و تارشدن احتمالی در برابر تغییر ویژگی‌ها را ببینید.
جمله: canvas سطح بیت‌مپ JS است؛ SVG نشانه‌گذاری وکتور — ابزار متفاوت.
جلوتر: web storage دادهٔ کلید/مقدار را در مرورگر ذخیره می‌کند نه رسم.

اشتباهات آسان

انتظار شکل رنگی فقط از HTML بدون جاوااسکریپت
فراموش متن جایگزین داخل <canvas>
استفاده از canvas برای لوگوی ساده که SVG بهتر است
اشتباه گرفتن رسم بیت‌مپ canvas با نشانه‌گذاری وکتور SVG
فقط اندازهٔ CSS را عوض کردن و تعجب از نرمی رسم
گرفتن این مقدمه به‌عنوان کل کورس Canvas API / بازی
رها کردن canvas بدون نام وقتی رسم برای فناوری کمکی معنا دارد

خلاصه

canvas سطح بیت‌مپ خالی با اندازه در HTML است
جاوااسکریپت با getContext("2d") و متدهایی مثل fillRect می‌کشد
برای آیکون مقیاس‌پذیر SVG؛ برای کار پویای پیکسل canvas
متن جایگزین وقتی رسم در دسترس نیست کمک می‌کند
SVG وکتور بود؛ این درس پیکسل رسم‌شده با اسکریپت است
بعدی: web storage در HTML برای ذخیرهٔ داده در مرورگر

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود