آ‌شنایی با Canvas در HTML

منظور از canvas چیست؟ عنصر <canvas> در html برای رسم گرافیک بر روی صفحه استفاده می شود.

Canvas در html چیست؟

عنصر canvas برای رسم گرافیک توسط جاوا اسکریپت استفاده می شود. عنصر canvas فقط نگهدارنده گرافیک است. برای رسم گرافیک روی این عنصر باید از جاوا اسکریپت استفاده کنید.

Canvas چندین روش برای رسم مسیر ها، جعبه ها، دایره ها، متون و اضافه کردن تصاویر دارد.

مثال های canvas

یک canvas محیط مربعی است که بر روی صفحه وب قرار می گیرد. به صورت پیش فرض این عنصر هیچ حاشیه و محتوایی ندارد.

<canvas id="myCanvas" width="200" height="100"></canvas>

به یاد داشته باشید که همیشه باید خاصیت  id و طول، عرض این عنصر را تعیین کنید. برای اضافه کردن حاشیه از خاصیت style استفاده کنید.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

رسم یک خط در canvas

با کد زیر شما می‌توانید یک خط در کنار آن مستطیل که در ابتدا کشیدیم رسم کنید.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

رسم یک دایره

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

رسم یک متن

با استفاده از کد زیر می‌توانیم متنی را درون مستطیل چاپ کنیم.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

دادن افکت به متن

حالا می‌خواهیم متنی که در بالا ایجاد کردیم را بهش یک افکت مثل stroke بدهیم.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

رسم یک linear gradient

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

رسم یک circular gradient

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

نتیجه گیری

در این مقاله با canvas ها آشنا شدیم. این مبحث، مبحث پیشرفته ایست که می‌توانید در صورت علاقه بیشتر در رابطه با آن تحقیق کنید.

امیدوارم از این مقاله استفاده لازم را برده باشید. اگر سوال، پیشنهاد یا انتقادی داشتید، حتما آن را با من در میان بگذارید و من در اولین فرصت بهتون پاسخ میدم.

تا مقاله بعدی…