پس از آشنایی با عنصر canvas و فناوریهای آن، این نخستین قدم در یادگیری canvas 2D است. از این به بعد به جای canvas 2D از نام canvas استفاده میکنیم. این مورد نهتنها در اینجا بلکه در تمام وب رعایت میشود. دیگر فناوریهای عنصر canvas نامهای ویژهی خود یعنی WebGL و WebGPU را دارند. نکتهی مهم اینکه شما برای یادگیری canvas باید به جاوااسکریپت تسلط داشته باشید. در این آموزش از ES6 استفاده شده اما تفاوت بزرگی با نسخههای پیشین جاوااسکریپت ندارد.
پیش از آغاز از شما خواهشمندیم تمام کدها را بلافاصله بعد از خواندن و یادگیری، آزمایش کنید تا بیشتر و بهتر آنها را یاد بگیرید. حتی میتوانید به سایتهایی مانند JSBin یا JSFiddle بروید و همگام با این آموزش پیش بروید. نتایج کدهای نوشتهشده از عمد در این مقاله قرار نگرفته تا خوانندهی عزیز ناچار وارد فرآیند یادگیری عملی شود.
راهاندازی canvas
برای راهاندازی canvas ابتدا به عنصر آن نیاز داریم! توجه کنید که برای استفاده از عنصر و ایجاد ترسیمات روی آن باید عنصر را در جاوااسکریپت نیز انتخاب کنیم، بنابراین به آن یک شناسه یا id
مناسب میدهیم. درضمن همانطور که گفتیم چیزی درون این عنصر قرار نمیگیرد. پیش از این، متنی درون این عنصر نوشته میشد که در صورت عدم پشتیبانی مرورگر از canvas آن متن نمایش داده شود ولی از آن دوران خیلی وقت است که گذشته!
<canvas id="cvs"></canvas>
شاید نیازی به گفتن این مورد نباشد اما توجه کنید که جاوااسکریپت پس از آنکه سند DOM بارگیری شد، اقدام به انتخاب عنصر میکند. برای حل این مشکل احتمالی میتوانید ویژگی defer
را به عنصر script
اضافه کنید. حال در جاوااسکریپت این عنصر را انتخاب میکنیم:
let cvs = document.getElementById("cvs");
عنصر canvas
یک متد خاص به نام getContext
دارد که با استفاده از آن میتوان یک فناوری خاص را برای آن عنصر فعال کرد و یک «زمینه» (context) برای کار با آن فناوری دریافت کرد. این متد یک ورودی از نوع متن دریافت میکند که نوع زمینهی خروجی را مشخص میکند. زمینهی موردنظر ما دوبعدی است و برای دریافت آن، ورودی متد باید “2d” باشد. در زیر ورودیهای دیگر نیز بررسی شدهاند:
let ctx = cvs.getContext("2d"), /* CanvasRenderingContext2D */
gl = cvs.getContext("webgl"), /* WebGLRenderingContext */
gl2 = cvs.getContext("webgl2"), /* WebGL2RenderingContext */
gpu = cvs.getContext("webgpu"); /* WebGPURenderingContext */
نکتهی بسیار مهم اینکه برای هر عنصر canvas
فقط و فقط میتوان یک زمینه ساخت. یعنی اگر برای یک عنصر canvas
ابتدا زمینهی 2D ایجاد کرده باشید، و سپس سعی کنید یک زمینهی WebGL نیز از آن بگیرید مقدار null خواهید گرفت! برای نمونه سه خط آخر کد بالا هر سه مقدار null برمیگردانند چون ابتدا یک زمینه از نوع 2D برای عنصر cvs
ساخته شده بود.
حال این «زمینه» به چه دردی میخورد؟ تمام ترسیمات توسط این زمینهها انجام میشود! عنصر canvas
از این به بعد شبیه عنصر img
رفتار میکند و تمام تمرکز ما روی زمینه و ویژگیهای آن خواهد بود. فعلا برای راحتی کار و برای مثالهای آینده، کد ابتدایی به این صورت خواهد بود:
let cvs = document.getElementById("cvs"),
ctx = cvs.getContext("2d");
cvs.width = cvs.height = 500;
عنصر canvas
به صورت پیشفرض دارای ابعاد 300 در 150 است ولی در کد بالا اندازهی آن را به 500 در 500 تغییر دادیم. توجه کنید تعیین ویژگی width
و height
برای عنصر canvas
در CSS نتیجهی متفاوتی خواهد داشت که بعدا توضیح خواهیم داد.
اولین گام، مستطیل!
با استفاده از متد rect
میتوان یک مستطیل رسم کرد. این متد چهار ورودی میپذیرد که به ترتیب مختصات X، مختصات Y، طول و عرض هستند (مختصات canvas شبیه مختصات SVG است). برای نمونه در کد زیر یک مربع به طول و عرض 100 و در مختصات (10, 10) رسم میکنیم:
ctx.rect(10, 10, 100, 100); /* rect (x, y, width, height) */
بعد از اجرای کد متوجه میشوید که چیزی درون canvas
رسم نشده! علت این است که ما شکل موردنظر برای رسم را تعریف کردیم، ولی این برای رسم کافی نیست! باید رنگ شکل، نوع رسم و دیگر موارد نیز مشخص شوند و سپس دستور رسم صادر شود!
رسم شکل در canvas
در canvas دو متد برای رسم داریم. یکی متد fill
که تمام شکل را رنگ میکند، و دیگری متد stroke
که به شکل حاشیه میدهد. این متدها معمولا هیچ ورودیای دریافت نمیکنند. متد fill
را برای کد بالا امتحان میکنیم. کد به صورت زیر خواهد بود:
/* FILL RECT */
ctx.rect(10, 10, 100, 100);
ctx.fill();
نتیجه یک مربع سیاه است. ولی شاید شما یک مربع سبز یا آبی بخواهید! برای تغییر رنگ ویژگی fillStyle
را تغییر میدهیم. برای نمونه کد زیر یک مربع سبز رسم میکند:
ctx.rect(10, 10, 100, 100);
ctx.fillStyle = "#32CD32"; /* GREEN */
ctx.fill();
حال ممکن است از خود بپرسید «اگر ویژگی fillStyle
را بعد از ترسیم عوض کنیم چه اتفاقی میافتد؟» هیچ اتفاقی! پس از اینکه یک شکل رسم شد، تغییر این ویژگیها هیچ تاثیری بر آن نخواهد داشت، مگر اینکه آن شکل مستقیما پاک شود. این یکی از تفاوتهای اصلی canvas و SVG است.
البته توجه کنید در مثال بالا، حتی بعد از اینکه دستور fill
اجرا شد، هنوز هم یک مربع به مختصات (10, 10) و طول ضلع 100 در حافظهی canvas
وجود دارد؛ یعنی اگر به fillStyle
رنگ قرمز بدهیم و دوباره دستور fill
را اجرا کنیم، یک مربع قرمز درست در همان مختصات و به همان اندازه رسم میشود و به نظر میرسد که مربع سبز تغییر رنگ داده! این حافظهی canvas
که به آن اشاره کردیم، «شکل فعلی» (current path) نامیده میشود و کاربردهای فراوانی دارد که بعدها به آنها خواهیم پرداخت.
آیا تغییر رنگ حاشیهی شکل نیز ممکن است؟ بله! هر رنگی که به ویژگی strokeStyle
بدهید، حاشیهی شکلی که رسم میشود به آن رنگ خواهد بود. برای نمونه در کد بالا این ویژگی را امتحان کرده و به مربع حاشیه بدهید. نکتهی مهم دیگر اینکه هر نوع رنگی که در CSS قابل قبول باشد را میتوان برای fillStyle
و strokeStyle
نیز به کار برد. در زیر چند نمونه میبینید:
ctx.fillStyle = "#000"; /* SHORT HEX */
ctx.fillStyle = "#008DDE"; /* LONG HEX */
ctx.strokeStyle = "rgb(255, 255, 0)"; /* RGB */
ctx.strokeStyle = "rgba(0, 100, 20, 1)"; /* RGBA */
ctx.fillStyle = "hsl(60, 100%, 50%)"; /* HSL */
شاید بخواهید اندازهی حاشیه را تغییر دهید. ویژگی lineWidth
در خدمت شماست! این ویژگی مقدار عددی میپذیرد و بهتر است عدد صحیح باشد. برای نمونه کد زیر یک مستطیل در مختصات (100, 50) و به ابعاد 300 در 200 رسم میکند. رنگ داخل آن صورتی، حاشیهی آن 10 و به رنگ زرد است:
ctx.rect(100, 50, 300, 200);
ctx.fillStyle = "deeppink";
ctx.lineWidth = 10;
ctx.strokeStyle = "#FF0";
ctx.fill();
ctx.stroke();
حاشیهی شکل (چه در canvas و چه در SVG) به این صورت است که نیمی از آن داخل شکل و نیمی از آن بیرون شکل رسم میشود. از آنجایی که متد stroke
بعد از متد fill
فراخوانی شد، نیمی از حاشیه داخل شکل رسم میشود. در حالت عادی آخرین چیزی که در canvas
رسم شده باشد، روی دیگر ترسیمات قرار میگیرد؛ یعنی اگر در کد بالا، ابتدا متد stroke
و سپس متد fill
اجرا شود، ابتدا حاشیهی شکل رسم میشود و سپس رنگ شکل روی نیمهی داخلی حاشیه قرار میگیرد و حاشیه کوچکتر به نظر میرسد.
برای درک بهتر این موضوع، در کد بالا به lineWidth
مقداری بزرگ مانند 50 بدهید و جای متدهای fill
و stroke
را عوض کرده و نتایج را مقایسه کنید. همچنین شکل زیر این موضوع را بهتر نمایش میدهد:
هر سه این مربعها به یک اندازه هستند اما اندازهی حاشیه lineWidth
هر کدام متفاوت است. (به خط سیاه داخل هرکدام توجه کنید) این مورد در حاشیههای کوچک مشکل خاصی نیست اما در حاشیههای بزرگ (مانند مربع زرد با حاشیهی 40) باید این مورد را در نظر داشته باشید.
نتیجهگیری
در اولین آموزش از canvas شما یاد گرفتید که چطور یک زمینه برای عنصر canvas
تعریف کرده و ویژگیها و متدهای اولیه برای ترسیم را یاد گرفتید. سعی کنید پیش از خواندن آموزش بعدی با این ویژگیها و متدها به اندازه کار کنید تا به خوبی آنها را یاد بگیرید. در آموزش بعدی متدهای مربوط به اشکال اولیه و خطوط را خواهید آموخت.
سوال داری؟ برو به پنل پرسش و پاسخ