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

ایجاد عناصر گرافیکی با استفاده از canvas

آشنایی با Canvas
آشنایی با Canvas

منظور از 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
رسم یک مستطیل با استفاده از canvas

رسم یک خط در canvas

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
رسم یک خط (قطر) بر روی مستطیل با استفاده از canvas
رسم یک خط (قطر) بر روی مستطیل با استفاده از canvas

رسم یک دایره

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
رسم یک دایره داخل مستطیل با استفاده از canvas
رسم یک دایره داخل مستطیل با استفاده از canvas

رسم یک متن

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
رسم یک متن با استفاده از canvas
رسم یک متن با استفاده از canvas

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

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
افکت دادن به متن با استفاده از canvas
افکت دادن به متن با استفاده از canvas

رسم یک 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);
رسم یک linear gradient با استفاده از canvas
رسم یک linear gradient با استفاده از canvas

رسم یک 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
رسم گرادینت گرد با استفاده از canvas

پایان ترم

[box type=”info” class=”question-from-users” width=””]

یک مستطیل و یک دایره با کمک Canvas رسم کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. با عرض درود:
    چجوری میشه توی مستطیلی که توی canvas ساختیم با استفاده از script یه مستطیل یا مربع دیگه ای داخلش ساخت ؟

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

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

    1. سلام محمد حالا شد. مرسی ممنونم که جداشون کردی که واضح باشه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=