
منظور از 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 ها آشنا شدیم. این مبحث، مبحث پیشرفته ایست که میتوانید در صورت علاقه بیشتر در رابطه با آن تحقیق کنید.
امیدوارم از این مقاله استفاده لازم را برده باشید. اگر سوال، پیشنهاد یا انتقادی داشتید، حتما آن را با من در میان بگذارید و من در اولین فرصت بهتون پاسخ میدم.
تا مقاله بعدی…