شنبه ۳۱ شهريور ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش HTML - گرافیک Canvas

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

از گرافیک های canvas می توان برای ایجاد تجسم های تعاملی و پویا، انیمیشن ها، بازی ها و موارد دیگر استفاده کرد. عنصر canvas اساساً یک جعبه خالی است که می‌توان آن را متناسب با نیازهای توسعه‌دهنده استایل و اندازه دهی کرد. پس از تنظیم عنصر canvas، از جاوا اسکریپت می توان برای ترسیم اشکال، خطوط، منحنی ها، متن، تصاویر و موارد دیگر بر روی بوم (canvas) استفاده می شود.

عنصر canvas تعدادی متد و ویژگی داخلی دارد که به توسعه دهندگان اجازه می دهد تا گرافیک روی canvas را کنترل و دستکاری کنند. به عنوان مثال، عنصر canvas دارای یک متد getContext() است که یک زمینه رندر دو بعدی را برمی گرداند که متدهایی را برای ترسیم و دستکاری گرافیک ها ارائه می دهد.

HTML canvas یک ابزار قدرتمند برای ایجاد گرافیک های پویا و تعاملی در وب است و انعطاف پذیری و کنترل زیادی را به توسعه دهندگان ارائه می دهد.

در اینجا یک مثال canvas ساده آورده ایم که یک مستطیل قرمز ترسیم می کند:

<!DOCTYPE html>
<html>
  <head>
    <title>مثال Canvas</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      // عنصر canvas را از DOM دریافت کنید
      const canvas = document.getElementById("myCanvas");
      // زمینه طراحی دو بعدی را برای canvas دریافت می کند
      const ctx = canvas.getContext("2d");
      // رنگ را روی قرمز قرار دهید
      ctx.fillStyle = "red";
      // یک مستطیل در موقعیت (50،50) با عرض و ارتفاع 100 پیکسل رسم می کند.
      ctx.fillRect(50, 50, 100, 100);
    </script>
  </body>
</html>

در این مثال ابتدا یک عنصر canvas با شناسه "myCanvas" ایجاد می کنیم و عرض و ارتفاع آن را روی 200 پیکسل قرار می دهیم. سپس در کد جاوا اسکریپت از متد document.getElementById برای به دست آوردن ارجاع به عنصر canvas و از متد getContext برای بدست آوردن زمینه طراحی دوبعدی برای canvas استفاده می کنیم. رنگ fill را با استفاده از ویژگی fillStyle قرمز می کنیم و سپس از روش fillRect برای کشیدن مستطیلی روی بوم در موقعیت (50،50) با عرض و ارتفاع 100 پیکسل استفاده می کنیم. وقتی این فایل HTML را در یک مرورگر وب باز می کنیم، باید یک مستطیل قرمز را روی بوم ببینیم.

در ادامه این درس به بررسی بیشتر این مفهوم می‌پردازیم:

گفتیم HTML Canvas یک عنصر HTML5 است که به شما امکان می‌دهد گرافیک را مستقیماً در صفحه وب خود ایجاد کنید. این کار با استفاده از JavaScript برای ترسیم اشکال، خطوط، متن و تصاویر روی بوم Canvas انجام می‌شود.

مزایای استفاده از HTML Canvas:

  • انعطاف‌پذیری: Canvas به شما امکان می‌دهد هر نوع گرافیکی را که می‌توانید تصور کنید ایجاد کنید.
  • کارایی: Canvas به دلیل استفاده از گرافیک برداری بسیار کارآمد است.
  • تعامل: Canvas را می‌توان با رویدادهای JavaScript تعاملی کرد.

ایجاد عنصر Canvas:

برای ایجاد عنصر Canvas، از کد زیر استفاده کنید:

<canvas id="canvas" width="500" height="300"></canvas>

این کد یک عنصر Canvas با شناسه "canvas" و ابعاد 500 در 300 پیکسل ایجاد می‌کند.

دسترسی به زمینه Canvas

برای دسترسی به بوم Canvas، از کد زیر استفاده کنید

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

این کد شیء بوم Canvas را با شناسه "canvas" و شیء زمینه Canvas را در متغیر ctx ذخیره می‌کند.

ترسیم اشکال روی Canvas

برای ترسیم اشکال روی Canvas، از متدهای شیء زمینه Canvas استفاده کنید. به عنوان مثال، برای ترسیم یک مستطیل، از کد زیر استفاده کنید:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 100, 50);

این کد یک مستطیل قرمز با ابعاد 100 در 50 پیکسل در موقعیت (10, 10) ترسیم می‌کند.

ترسیم خطوط روی Canvas

برای ترسیم خطوط روی Canvas، از متدهای شیء زمینه Canvas استفاده کنید. به عنوان مثال، برای ترسیم یک خط آبی از (10, 10) تا (100, 50)، از کد زیر استفاده کنید:

ctx.strokeStyle = "#0000FF";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.stroke();

این کد یک خط آبی از (10, 10) تا (100, 50) ترسیم می‌کند.

ترسیم متن روی Canvas

 

برای ترسیم متن روی Canvas، از متدهای شیء زمینه Canvas استفاده کنید. به عنوان مثال، برای ترسیم متن "Hello, world!" در فونت Arial 14pt قرمز، از کد زیر استفاده کنید:

ctx.fillStyle = "#FF0000";
ctx.font = "14pt Arial";
ctx.fillText("Hello, world!", 10, 50);

این کد متن "Hello, world!" را در فونت Arial 14pt قرمز در موقعیت (10, 50) ترسیم می‌کند.

ترسیم تصاویر روی Canvas

برای ترسیم تصاویر روی Canvas، از متد drawImage() شیء زمینه Canvas استفاده کنید. به عنوان مثال، برای ترسیم تصویر "image.jpg" در موقعیت (10, 10)، از کد زیر استفاده کنید:

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 10, 10);
};
image.src = "image.jpg";

این کد یک تصویر به نام "image.jpg" را در موقعیت (10, 10) ترسیم می‌کند.

ترسیم شکل‌ها

آموزش رسم مستطیل و مربع در canvas

ساخت مستطیل و مربع در یک المان canvas در HTML5 با استفاده از جاوااسکریپت انجام می‌شود. در زیر یک نمونه ساده از کد جاوااسکریپت برای رسم یک مستطیل و یک مربع در یک المان canvas آورده شده است.

  <canvas id="myCanvas" width="400" height="300"></canvas>

  <script>
    // گرفتن مرجع به المان canvas
    var canvas = document.getElementById("myCanvas");

    // گرفتن مرجع به context 2D
    var ctx = canvas.getContext("2d");

    // رسم مستطیل
    ctx.fillStyle = "#FF0000"; // رنگ پر کردن
    ctx.fillRect(50, 50, 100, 75); // fillRect(x, y, width, height)

    // رسم مربع
    ctx.strokeStyle = "#00FF00"; // رنگ خط حاشیه
    ctx.lineWidth = 2; // عرض خط حاشیه
    ctx.strokeRect(200, 50, 75, 75); // strokeRect(x, y, width, height)
  </script>

در این کد، ما یک المان canvas ایجاد کرده‌ایم با عرض 400 پیکسل و ارتفاع 300 پیکسل. با استفاده از متدهای fillRect و strokeRect در متغیر ctx، یک مستطیل پرشده با رنگ قرمز و یک مربع با خط حاشیه سبز رسم شده‌اند. موقعیت و ابعاد این شکل‌ها با استفاده از پارامترهای x، y، width و height مشخص شده‌اند.
 
 

آموزش رسم دایره‌ها و قوس‌ها در canvas

canvas  به شما این امکان را می‌دهد تا گرافیک‌های پیچیده‌تری را در وبسایت خود رسم کنید. شما می‌توانید با استفاده از JavaScript دایره‌ها و قوس‌ها را در یک المان canvas ایجاد کنید.

در زیر یک مثال ساده برای رسم دایره و قوس در canvas آورده شده است:

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

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // رسم دایره
    context.beginPath(); // شروع یک مسیر جدید
    context.arc(150, 100, 50, 0, 2 * Math.PI); // arc(x, y, radius, startAngle, endAngle)
    context.fillStyle = 'blue'; // رنگ پر کردن
    context.fill(); // پر کردن دایره با رنگ
    context.stroke(); // رسم حاشیه دایره

    // رسم قوس
    context.beginPath();
    context.arc(250, 100, 50, 0, Math.PI, false); // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    context.lineWidth = 2; // ضخامت خط
    context.strokeStyle = 'red'; // رنگ خط
    context.stroke(); // رسم خط حاشیه
  </script>

 

آموزش ترسیم خطوط در canvas

برای ترسیم خطوط در المان canvas با استفاده از HTML5 و JavaScript، می‌توانید از متد lineTo در کنار beginPath و stroke استفاده کنید. در زیر یک مثال ساده برای ترسیم خطوط در canvas آمده است:

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // شروع یک مسیر جدید
    context.beginPath();

    // تنظیم مختصات شروع خط
    context.moveTo(50, 50);

    // ترسیم خط تا مختصات مقصد
    context.lineTo(350, 50);

    // ترسیم خط دوم
    context.moveTo(50, 100);
    context.lineTo(350, 100);

    // تنظیم ویژگی‌های خط
    context.lineWidth = 2; // ضخامت خط
    context.strokeStyle = 'green'; // رنگ خط

    // رسم خطوط
    context.stroke();
  </script>

در این مثال، ما با استفاده از moveTo به مختصات شروع مسیر خود اشاره کرده‌ایم و سپس با استفاده از lineTo خطوط را به مختصات مقصد کشیده‌ایم. ما از stroke برای نمایش خطوط با ویژگی‌های تنظیم شده استفاده کرده‌ایم.

در اینجا متد moveTo برای تعیین نقطه شروع و lineTo برای ترسیم خطوط به مقصد مورد استفاده قرار گرفته‌اند. سپس با تنظیم ویژگی‌های خط (مانند ضخامت و رنگ) و اجرای stroke، خطوط در المان canvas رسم می‌شوند.

استایل و رنگ ها در canvas

در محیط canvas ، استایل به مجموعه‌ای از ویژگی‌ها اطلاق می‌شود که مشخص می‌کنند چگونه یک شیء (مانند خطوط یا دایره‌ها) در canvas رسم شده و نمایش داده می‌شود. استایل‌ها شامل ویژگی‌هایی مانند رنگ، ضخامت خط، نوع خط و... می‌شوند.

آموزش اعمال رنگ‌ها و گرادیان‌ها در canvas

در HTML5 و المان canvas، شما می‌توانید از رنگ‌ها و گرادیان‌ها برای ایجاد اثرات تصویری در طراحی گرافیکی استفاده کنید. در زیر، یک مثال از استفاده از رنگ و گرادیان در canvas آورده شده است.

برای تنظیم رنگ یک شیء (مثلاً دایره یا مستطیل) در canvas، از ویژگی fillStyle استفاده می‌شود. مقدار این ویژگی می‌تواند یک رنگ یا یک کد رنگ (مثل "red" یا "#00ff00") باشد.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // رنگ پر کردن دایره
    context.beginPath();
    context.arc(100, 100, 50, 0, 2 * Math.PI);
    context.fillStyle = 'blue';
    context.fill();
  </script>

برای اعمال گرادیان (تغییر رنگ از یک نقطه به نقطه دیگر)، از متد createLinearGradient یا createRadialGradient در canvas استفاده می‌شود.

گرادیان خطی:
 

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // ایجاد گرادیان خطی از سمت چپ به راست
    var gradient = context.createLinearGradient(0, 0, 400, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');

    // رسم دایره با گرادیان
    context.beginPath();
    context.arc(200, 150, 50, 0, 2 * Math.PI);
    context.fillStyle = gradient;
    context.fill();
  </script>

گرادیان شعاعی:
 

  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // ایجاد گرادیان شعاعی
    var gradient = context.createRadialGradient(200, 150, 20, 200, 150, 100);
    gradient.addColorStop(0, 'yellow');
    gradient.addColorStop(1, 'green');

    // رسم دایره با گرادیان
    context.beginPath();
    context.arc(200, 150, 100, 0, 2 * Math.PI);
    context.fillStyle = gradient;
    context.fill();
  </script>

در هر دو مثال، ابتدا یک گرادیان با createLinearGradient یا createRadialGradient ایجاد شده و سپس به عنوان مقدار fillStyle در رسم شیء (دایره در اینجا) استفاده می‌شود. addColorStop برای افزودن نقاط توقف به گرادیان استفاده می‌شود تا تغییرات رنگ به طور تدریجی اعمال شود.

آموزش تنظیم استایل خط و stroke در Canvas

در HTML5 و المان canvas، شما می‌توانید با استفاده از ویژگی‌های strokeStyle و fillStyle استایل خطوط را تنظیم کنید. این ویژگی‌ها به شما امکان می‌دهند رنگ خطوط را مشخص کنید. در زیر یک مثال از استفاده از این ویژگی‌ها آورده شده است:

  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم استایل خط
    context.strokeStyle = 'blue'; // رنگ خط
    context.lineWidth = 3; // ضخامت خط
    context.lineJoin = 'round'; // نقاط اتصال گرد

    // رسم یک مستطیل با خطوط استایل تنظیم شده
    context.beginPath();
    context.rect(50, 50, 100, 75);
    context.stroke();

    // تنظیم استایل پر
    context.fillStyle = 'yellow'; // رنگ پر
    context.fill();

    // تنظیم استایل دیگر
    context.strokeStyle = 'green'; // تغییر رنگ خط
    context.lineWidth = 2; // تغییر ضخامت خط
    context.lineJoin = 'bevel'; // تغییر نقاط اتصال به حالت مخروطی

    // رسم یک دایره با خطوط استایل تنظیم شده
    context.beginPath();
    context.arc(300, 150, 50, 0, 2 * Math.PI);
    context.stroke();

    // تنظیم استایل پر دیگر
    context.fillStyle = 'orange'; // تغییر رنگ پر
    context.fill();
  </script>

در این مثال:

strokeStyle: تنظیم رنگ خط. مقدار می‌تواند یک کد رنگ یا نام رنگ (مانند 'red' یا '#00ff00') باشد.
fillStyle: تنظیم رنگ پر. مقدار می‌تواند یک کد رنگ یا نام رنگ باشد.
lineWidth: تنظیم ضخامت خط.
lineJoin: تنظیم نقاط اتصال. مقادیر شامل round، bevel و miter هستند.
این تنظیمات به شما این امکان را می‌دهند تا استایل خطوط و پرها را به دلخواه خود تغییر دهید و ظاهر گرافیکی رسم شده را کنترل کنید.

شفافیت و مقادیر آلفا در canvas

در محیط canvas ، شفافیت تصاویر با استفاده از مقدار آلفا (Alpha) تعیین می‌شود. مقدار آلفا یک عدد از بازه 0 تا 1 است که نشان‌دهنده شفافیت یک شیء است، که 0 به معنای کاملاً شفاف و 1 به معنای کاملاً ناپدید است.

تنظیم شفافیت با استفاده از آلفا:

  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم رنگ با شفافیت
    context.fillStyle = 'rgba(255, 0, 0, 0.5)'; // قرمز با شفافیت نصف
    context.fillRect(50, 50, 100, 75); // رسم مستطیل

    // تنظیم شفافیت خط
    context.strokeStyle = 'rgba(0, 0, 255, 0.7)'; // آبی با شفافیت 0.7
    context.lineWidth = 5; // ضخامت خط
    context.strokeRect(200, 50, 100, 75); // رسم مستطیل با خط
  </script>

در این مثال، rgba به جای rgb برای تنظیم رنگ استفاده شده است. آخرین پارامتر این تابع، مقدار آلفا، نشان‌دهنده شفافیت است.

تنظیم شفافیت با globalAlpha:

همچنین، می‌توانید از ویژگی globalAlpha استفاده کنید تا شفافیت برای تمام شیء‌های رسم شده در canvas تنظیم شود.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم شفافیت جهانی برای تمام شیء‌ها
    context.globalAlpha = 0.5;

    // تنظیم رنگ و رسم مستطیل
    context.fillStyle = 'red';
    context.fillRect(50, 50, 100, 75);

    // تغییر شفافیت برای شیء بعدی
    context.globalAlpha = 0.8;

    // تنظیم رنگ و رسم دایره
    context.fillStyle = 'blue';
    context.beginPath();
    context.arc(250, 100, 50, 0, 2 * Math.PI);
    context.fill();
  </script>

در این مثال، globalAlpha برای تعیین شفافیت جهانی در context استفاده شده است. این تغییر شفافیت بر تمام شیء‌های رسم شده در ادامه تاثیر می‌گذارد، تا زمانی که مقدار globalAlpha دوباره تغییر نکند.

 مسیرها و منحنی‌ها در canvas

در HTML5 و المان canvas، شما می‌توانید با استفاده از مسیرها و منحنی‌ها گرافیک پیچیده‌تری را رسم کنید. این اعمال شامل رسم خطوط، دایره‌ها، مستطیل‌ها، و منحنی‌ها می‌شود. در زیر یک مثال از رسم خطوط و یک منحنی  آمده است:

رسم خطوط:

  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // شروع یک مسیر جدید
    context.beginPath();

    // تعیین نقطه شروع
    context.moveTo(50, 50);

    // ترسیم خط
    context.lineTo(150, 50);

    // ترسیم خط دیگر
    context.lineTo(150, 150);

    // ترسیم خط نهایی
    context.lineTo(50, 150);

    // بستن مسیر
    context.closePath();

    // تنظیم استایل خط
    context.strokeStyle = 'blue';

    // رسم خطوط با استفاده از استایل تنظیم شده
    context.stroke();
  </script>

رسم منحنی

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    // دریافت مرجع به المان canvas
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // شروع یک مسیر جدید
    context.beginPath();

    // تعیین نقطه شروع
    context.moveTo(50, 150);

    // رسم منحنی بیزیه
    context.bezierCurveTo(50, 50, 150, 50, 150, 150);

    // تنظیم استایل خط
    context.strokeStyle = 'green';

    // رسم خط با استفاده از استایل تنظیم شده
    context.stroke();
  </script>

در مثال اول، یک مسیر با استفاده از moveTo و lineTo تعریف شده و با closePath بسته می‌شود. در مثال دوم، یک منحنی با استفاده از bezierCurveTo رسم می‌شود.

شما همچنین می‌توانید از دستورات دیگر مانند arc و arcTo برای رسم دایره‌ها و قوس‌ها نیز استفاده کنید. این دستورات به شما این امکان را می‌دهند تا تصاویر پیچیده‌تر و هنرمندانه‌تری را در المان canvas ایجاد کنید. 

آموزش متدهای moveTo، lineTo، arcTo در canvas

متد moveTo:

متد moveTo در API Canvas برای تنظیم نقطه شروع یک زیرمسیر جدید استفاده می‌شود. این متد هیچ خروجی قابل مشاهده‌ای ایجاد نمی‌کند اما برای تعیین اینکه عملیات نقاشی بعدی از کجا شروع شود، حیاتی است.

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم نقطه شروع
    context.moveTo(50, 50);

    // این خط از (50، 50) شروع می‌شود
    context.lineTo(150, 150);

    // تنظیم یک نقطه شروع جدید بدون کشیدن خط
    context.moveTo(200, 50);

    // این خط از (200، 50) شروع می‌شود
    context.lineTo(300, 150);

    // تنظیم استایل خط و کشیدن خطوط
    context.strokeStyle = 'blue';
    context.stroke();
  </script>

در این مثال، moveTo(50, 50) نقطه ابتدایی را تعیین می‌کند، lineTo(150, 150) یک خط از نقطه ابتدایی به (150، 150) می‌کشد، سپس moveTo(200, 50) یک نقطه ابتدایی جدید بدون کشیدن خط تعیین می‌کند و lineTo(300, 150) یک خط از نقطه ابتدایی جدید به (300، 150) می‌کشد. در نهایت، متد stroke برای اعمال استایل خط و واقعی کشیدن خطوط استفاده می‌شود.

متد lineTo:

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

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم نقطه شروع
    context.moveTo(50, 50);

    // کشیدن یک خط به (150، 150)
    context.lineTo(150, 150);

    // کشیدن یک خط دیگر به (300، 50)
    context.lineTo(300, 50);

    // تنظیم استایل خط و کشیدن خطوط
    context.strokeStyle = 'green';
    context.stroke();
  </script>

در این مثال، moveTo(50, 50) نقطه ابتدایی را تعیین می‌کند، lineTo(150, 150) یک خط از نقطه ابتدایی به (150، 150) می‌کشد و lineTo(300, 50) یک خط دیگر از نقطه آخر به (300، 50) می‌کشد. در نهایت، متد stroke برای اعمال استایل خط و واقعی کشیدن خطوط استفاده می‌شود.

متد arcTo:

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

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // کشیدن یک مستطیل
    context.rect(50, 50, 200, 100);
    context.strokeStyle = 'blue';
    context.stroke();

    // کشیدن یک دایره بین دو خط مشی
    context.beginPath();
    context.moveTo(250, 50);
    context.arcTo(300, 50, 300, 150, 30); // (x1, y1, x2, y2, radius)
    context.strokeStyle = 'red';
    context.stroke();
  </script>

در این مثال، rect(50, 50, 200, 100) یک مستطیل را کشیده و arcTo(300, 50, 300, 150, 30) یک دایره را بین دو خط مشی کشیده است. متد stroke برای اعمال استایل خط در مستطیل و دایره استفاده می‌شود.

تصویرسازی و نمایش متن در canvas

در محیط HTML5 Canvas، رندر (Render) متن به معنای تصویرسازی یا نمایش متن در المان Canvas است. به طور کلی، شما می‌توانید متن‌های مختلف را در Canvas رسم کرده و سفارشی کنید.

تعریف برخی مفاهیم در نمایش متن با Canvas:

  • فونت (Font): تنظیمات فونت شامل نوع فونت و اندازه آن. به عنوان مثال: '20px Arial'.
  • رنگ (Color): تنظیم رنگ متن با استفاده از context.fillStyle. می‌توانید از کدهای رنگ، نام رنگ، یا مقادیر RGB و RGBA استفاده کنید.
  • متد fillText() و strokeText(): این متدها برای رسم متن در Canvas استفاده می‌شوند. fillText() برای پر کردن متن با رنگ فیکس و strokeText() برای ایجاد حاشیه (خط) دور متن.
  • محل متن (Text Position): محل شروع رسم متن با استفاده از مختصات x و y تعیین می‌شود.

آموزش افزودن متن به Canvas

برای افزودن متن به Canvas در HTML5، شما می‌توانید از متد fillText یا strokeText استفاده کنید. متد fillText برای نمایش متن با پر کردن رنگ و متد strokeText برای ایجاد حاشیه (خط) دور متن استفاده می‌شود. در زیر یک مثال از هر دو نوع متد آورده شده است:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // افزودن متن با fillText
    context.font = '30px Arial';
    context.fillStyle = 'blue';
    context.fillText('سلام، این متن با fillText است!', 50, 50);

    // افزودن متن با strokeText
    context.font = '25px Arial';
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.strokeText('سلام، این متن با strokeText است!', 50, 100);
  </script>

در این مثال:

ابتدا با fillText یک متن با پر کردن رنگ در Canvas قرار داده‌ایم.
سپس با strokeText یک متن با حاشیه و رنگ حاشیه متفاوت افزوده‌ایم.
شما می‌توانید مقادیر font, fillStyle, strokeStyle, lineWidth و موقعیت متن را به تنظیمات خود تغییر دهید تا به شکل و استایل دلخواه خود برسد. این تنظیمات باید قبل از فراخوانی fillText یا strokeText اعمال شوند، زیرا تاثیر زیادی بر روی نحوه نمایش متن خواهند داشت.

آموزش استایل و قالب‌بندی متن در Canvas

در HTML5 Canvas، شما می‌توانید استایل و قالب‌بندی متن‌هایی که در Canvas رسم می‌کنید را با استفاده از ویژگی‌ها و متدهای مربوطه تنظیم کنید. در زیر، نمونه‌هایی از تنظیمات مختلف برای استایل و قالب‌بندی متن آورده شده‌اند:

 <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تنظیم فونت و اندازه متن
    context.font = '30px Arial';

    // تنظیم رنگ پر کردن متن
    context.fillStyle = 'blue';

    // تنظیم رنگ حاشیه متن
    context.strokeStyle = 'red';

    // تنظیم عرض حاشیه (خط) متن
    context.lineWidth = 2;

    // تنظیم متن در موقعیت مشخص
    context.fillText('متن با فونت و رنگ پر کردن تنظیم شده', 50, 50);

    // تنظیم متن با حاشیه (خط) و رنگ حاشیه متفاوت
    context.strokeText('متن با فونت و حاشیه تنظیم شده', 50, 100);
  </script>

در این مثال:

  • context.font: تنظیم فونت و اندازه متن.
  • context.fillStyle: تنظیم رنگ پر کردن متن.
  • context.strokeStyle: تنظیم رنگ حاشیه متن.
  • context.lineWidth: تنظیم عرض حاشیه (خط) متن.
  • context.fillText: رسم متن با استفاده از رنگ پر کردن.
  • context.strokeText: رسم متن با حاشیه و رنگ حاشیه.

شما همچنین می‌توانید ویژگی‌های دیگری مانند textAlign (تنظیم موقعیت افقی متن) و textBaseline (تنظیم موقعیت عمودی متن) را نیز تغییر دهید. به عنوان مثال:

// تنظیم موقعیت افقی متن (میانه)
context.textAlign = 'center';

// تنظیم موقعیت عمودی متن (میانه)
context.textBaseline = 'middle';

با تجربه و تغییر تنظیمات مختلف، شما می‌توانید متن‌های با استایل‌ها و قالب‌بندی‌های گوناگون را در Canvas ایجاد کنید.

  آموزش تراز و خطوط پایه متن در canvas

در Canvas، می‌توانید با استفاده از ویژگی‌های textAlign و textBaseline موقعیت تراز و خطوط پایه متن را تنظیم کنید. این ویژگی‌ها به شما امکان می‌دهند تا موقعیت افقی و عمودی متن را به دقت کنترل کنید.

تراز افقی (textAlign):

ویژگی textAlign برای تنظیم تراز افقی متن استفاده می‌شود. مقادیر ممکن شامل "start" (شروع)، "end" (پایان)، "left" (چپ)، "right" (راست) و "center" (میانه) هستند.

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.font = '20px Arial';

    // تنظیم تراز افقی به چپ
    context.textAlign = 'left';
    context.fillText('متن تراز شده به چپ', 50, 50);

    // تنظیم تراز افقی به راست
    context.textAlign = 'right';
    context.fillText('متن تراز شده به راست', 350, 100);

    // تنظیم تراز افقی به میانه
    context.textAlign = 'center';
    context.fillText('متن تراز شده به میانه', 200, 150);
  </script>

خطوط پایه (textBaseline):

 

ویژگی textBaseline برای تنظیم خطوط پایه (موقعیت عمودی متن) استفاده می‌شود. مقادیر ممکن شامل "top" (بالا)، "hanging" (آویزان)، "middle" (میانه)، "alphabetic" (الفبایی) و "bottom" (پایین) هستند.

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.font = '20px Arial';

    // تنظیم خطوط پایه به بالا
    context.textBaseline = 'top';
    context.fillText('خطوط پایه به بالا', 50, 50);

    // تنظیم خطوط پایه به میانه
    context.textBaseline = 'middle';
    context.fillText('خطوط پایه به میانه', 200, 100);

    // تنظیم خطوط پایه به پایین
    context.textBaseline = 'bottom';
    context.fillText('خطوط پایه به پایین', 350, 150);
  </script>

با استفاده از textAlign و textBaseline به ترتیب می‌توانید تراز افقی و خطوط پایه متن را به دقت کنترل کنید. این ویژگی‌ها به شما اجازه می‌دهند تا متن را به دقت در مکان مورد نظر خود در Canvas قرار دهید.

 مفهوم کنترل رویداد در Canvas

کنترل رویداد (Event Handling) در Canvas به معنای واکنش به وقوع اتفاقات مانند کلیک ماوس، حرکت ماوس، یا کلیدهای صفحه کلید است که در محیط canvas اتفاق می‌افتد. این قابلیت به شما این امکان را می‌دهد که برنامه‌های تعاملی بسازید که با تغییرات در Canvas هماهنگ شده و واکنش نشان دهند.

در HTML5 Canvas، رویدادها از نوع ماوس (مانند click، mousemove) و کلیدهای صفحه کلید (مانند keydown، keyup) در اختیار شما قرار می‌گیرند. برای کنترل رویدادها در Canvas، شما می‌توانید از متد addEventListener استفاده کنید.

آموزش مدیریت رویدادهای موس در canvas

مدیریت رویدادهای ماوس در Canvas از طریق افزودن گوش دادن به رویدادهای ماوس با استفاده از addEventListener انجام می‌شود. در اینجا، چند نمونه از مدیریت رویدادهای موس در Canvas آورده شده است:

کلیک ماوس:
 

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // مدیریت رویداد کلیک ماوس
    canvas.addEventListener('click', function(event) {
      var x = event.clientX - canvas.getBoundingClientRect().left;
      var y = event.clientY - canvas.getBoundingClientRect().top;

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillText('کلیک در (' + x + ', ' + y + ')', x, y);
    });
  </script>

حرکت ماوس:
 

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // مدیریت رویداد حرکت ماوس
    canvas.addEventListener('mousemove', function(event) {
      var x = event.clientX - canvas.getBoundingClientRect().left;
      var y = event.clientY - canvas.getBoundingClientRect().top;

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillText('حرکت ماوس به (' + x + ', ' + y + ')', x, y);
    });
  </script>

فشردن و رها کردن دکمه ماوس:
 

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // مدیریت رویداد فشردن دکمه ماوس
    canvas.addEventListener('mousedown', function(event) {
      var x = event.clientX - canvas.getBoundingClientRect().left;
      var y = event.clientY - canvas.getBoundingClientRect().top;

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillText('دکمه ماوس فشرده شده در (' + x + ', ' + y + ')', x, y);
    });

    // مدیریت رویداد رها کردن دکمه ماوس
    canvas.addEventListener('mouseup', function(event) {
      var x = event.clientX - canvas.getBoundingClientRect().left;
      var y = event.clientY - canvas.getBoundingClientRect().top;

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillText('دکمه ماوس رها شده در (' + x + ', ' + y + ')', x, y);
    });
  </script>

در این مثالها، addEventListener بر روی المان canvas استفاده شده است تا به رویدادهای موس گوش داده شود. در تابع callback، موقعیت (x، y) ماوس محاسبه شده و سپس با استفاده از clearRect Canvas پاکسازی شده و متن جدید در همان موقعیت نمایش داده می‌شود.

شما همچنین می‌توانید از رویدادهای دیگری مانند dblclick (دوبار کلیک)، contextmenu (منوی راست کلیک) و ... برای افزودن تعاملات بیشتر به Canvas استفاده کنید.

آموزش پیاده‌سازی رویدادهای صفحه کلید در Canvas

برای پیاده‌سازی رویدادهای صفحه کلید در Canvas، می‌توانید از رویدادهای keydown و keyup استفاده کنید. در زیر یک مثال از چگونگی پیاده‌سازی این رویدادها در Canvas آورده شده است:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // مدیریت رویداد فشردن کلید صفحه کلید
    document.addEventListener('keydown', function(event) {
      context.clearRect(0, 0, canvas.width, canvas.height);

      var key = event.key;
      context.fillText('کلید فشرده شده: ' + key, 50, 50);
    });

    // مدیریت رویداد رها کردن کلید صفحه کلید
    document.addEventListener('keyup', function(event) {
      context.clearRect(0, 0, canvas.width, canvas.height);

      var key = event.key;
      context.fillText('کلید رها شده: ' + key, 50, 50);
    });
  </script>

در این مثال:

وقتی یک کلید فشرده شده است (keydown):

  • Canvas پاکسازی می‌شود.
  • مقدار کلید فشرده شده استخراج می‌شود.
  • متن با اطلاعات کلید فشرده شده در Canvas نمایش داده می‌شود.

وقتی یک کلید رها شده است (keyup):

  • Canvas پاکسازی می‌شود.
  • مقدار کلید رها شده استخراج می‌شود.
  • متن با اطلاعات کلید رها شده در Canvas نمایش داده می‌شود.

شما می‌توانید با استفاده از مقادیر event.key به کلیدی که فشرده یا رها شده است، دسترسی پیدا کنید. همچنین می‌توانید از مقادیر دیگری نیز مانند event.code و event.keyCode استفاده کنید.

توجه داشته باشید که روش keyCode به طور رسمی توصیه نمی‌شود، ولی key و code معمولاً بهترین گزینه‌ها هستند.

آموزش ایجاد عناصر تعاملی در Canvas

برای ایجاد عناصر تعاملی در Canvas، می‌توانید از مکانیسم رویدادهای موس و صفحه کلید که در قبلی‌ها آموزش داده شد، بهره‌مند شوید. به عنوان مثال، می‌توانید یک مستطیل را به عنوان دکمه ایجاد کرده و به آن گوش دادن تا وقتی کاربر روی آن کلیک کند، یک عمل خاص انجام شود. در زیر یک نمونه ساده آورده شده است:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // ایجاد مستطیل به عنوان دکمه
    var button = {
      x: 50,
      y: 50,
      width: 100,
      height: 50,
      color: 'blue',
      text: 'کلیک کنید',
    };

    // تابع برای رسم دکمه
    function drawButton() {
      context.fillStyle = button.color;
      context.fillRect(button.x, button.y, button.width, button.height);
      context.fillStyle = 'white';
      context.fillText(button.text, button.x + 10, button.y + 30);
    }

    // مدیریت رویداد کلیک بر روی دکمه
    canvas.addEventListener('click', function(event) {
      var mouseX = event.clientX - canvas.getBoundingClientRect().left;
      var mouseY = event.clientY - canvas.getBoundingClientRect().top;

      if (
        mouseX >= button.x &&
        mouseX <= button.x + button.width &&
        mouseY >= button.y &&
        mouseY <= button.y + button.height
      ) {
        alert('دکمه کلیک شد!');
      }
    });

    // رسم دکمه در ابتدا
    drawButton();
  </script>

در این مثال:

یک دکمه با ویژگی‌های مختلف مانند موقعیت (x و y)، ابعاد (width و height)، رنگ (color) و متن (text) ایجاد شده است.
یک تابع به نام drawButton برای رسم دکمه ایجاد شده است.
با گوش دادن به رویداد کلیک، موقعیت ماوس با موقعیت دکمه مقایسه شده و اگر ماوس در داخل مستطیل دکمه قرار داشته باشد، یک هشدار نمایش داده می‌شود.
این یک مثال ساده است و می‌توانید با افزودن عناصر و رویدادهای دیگر، تعاملات پیچیده‌تری را در Canvas پیاده‌سازی کنید.

اصول انیمیشن در canvas

انیمیشن در HTML5 Canvas به شما این امکان را می‌دهد تا تغییراتی را در طول زمان به تصویرهای خود اعمال کنید و این امکان را فراهم می‌کند تا اشیاء، شیء، یا متن در Canvas به صورت پویا حرکت کنند. در ادامه، اصول اصلی انیمیشن در Canvas را معرفی می‌کنم:

  1. زمان (Time):
    انیمیشن به معنای تغییرات در زمان است. برای ساختن انیمیشن در Canvas، شما نیاز به مدیریت زمان دارید.
    معمولاً از توابع مربوط به زمان مانند requestAnimationFrame استفاده می‌شود تا انیمیشن به صورت صاف و با کیفیت اجرا شود.
    2. فریم (Frame):
    هر تصویر در یک لحظه زمانی خاص در انیمیشن یک فریم نامیده می‌شود. انیمیشن با تغییرات متوالی در فریمها ساخته می‌شود.
    معمولاً 60 فریم در ثانیه (60 FPS) به عنوان یک میزان مناسب برای انیمیشن در نظر گرفته می‌شود.
    3. ترانزیشن (Transition):
    ترانزیشن به تغییرات یک ویژگی (مانند موقعیت، اندازه، رنگ و ...) از یک حالت به حالت دیگر در طول زمان اشاره دارد.
    برای ایجاد ترانزیشن در Canvas، شما می‌توانید از توابع تغییر مقدار تدریجی مانند linear interpolation (lerp) استفاده کنید.
    4. تایم‌لاین (Timeline):
    تایم‌لاین یک نمایش زمانی از فریمها و تغییرات در طول زمان است. این کمک می‌کند تا زمان شروع و پایان انیمیشن و تغییرات در هر فریم مشخص شود.
    با توجه به تایم‌لاین، می‌توانید زمانبندی دقیقتری برای تغییرات در انیمیشن اعمال کنید.
    5. تسریع و یا تسریع ناگهانی (Easing or Ease-in/out):
    افزودن تسریع یا کندی به تغییرات در انیمیشن می‌تواند طراحی آن را جذاب‌تر کند. تسریع ناگهانی (ease-in/out) به معنای شروع یا پایان ترانزیشن با حرکت کند و سپس به سرعت افزایش یا کاهش می‌یابد.
    توابع مانند cubic Bezier و ease-in-out در اینجا به کار می‌روند.
    6. تداخل (Overlap):
    تداخل این امکان را فراهم می‌کند تا انیمیشن‌ها به صورت همزمان اجرا شوند. این کمک می‌کند تا اجزای مختلف انیمیشن هماهنگ شوند.
    برای مدیریت تداخل، باید دقت کنید که زمانبندی و ترتیب اجزاء انیمیشن به درستی تنظیم شده باشد.

مثال:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // تابع اصلی انیمیشن
    function animate() {
      // کد اصلی انیمیشن اینجا قرار می‌گیرد

      // فراخوانی دوباره تابع animate برای ادامه انیمیشن
      requestAnimationFrame(animate);
    }

    // شروع اجرای انیمیشن
    animate();
  </script>

در این مثال ابتدا یک Canvas ایجاد شده و یک متغیر context برای رسم در Canvas استخراج شده است. سپس یک تابع animate تعریف شده که محل اصلی انیمیشن را اجرا می‌کند. در نهایت با فراخوانی اولیه تابع animate، انیمیشن شروع می‌شود و به صورت مداوم ادامه می‌یابد. این تنها یک ابتدایی برای شروع است و شما می‌توانید به تدریج توابع ترانزیشن، تداخل و سایر اصول انیمیشن را به آن اضافه کنید.

آموزش استفاده از requestAnimationFrame برای انیمیشن‌های روان

تابع requestAnimationFrame یک روش بهینه‌تر برای اجرای انیمیشن‌ها در مرورگر است. این تابع باعث می‌شود انیمیشن‌ها به طور روان و با کیفیت بالا اجرا شوند. در ادامه، یک مثال ساده از استفاده از requestAnimationFrame برای انیمیشن در Canvas آورده شده است:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // متغیرهای مربوط به موقعیت اولیه شیء در انیمیشن
    var x = 50;
    var y = 50;

    // تابع اصلی انیمیشن
    function animate() {
      // پاک کردن Canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

      // رسم یک مستطیل حرکتی
      context.fillRect(x, y, 50, 50);

      // افزایش موقعیت برای ایجاد حرکت
      x += 2;

      // فراخوانی دوباره تابع animate برای ادامه انیمیشن
      requestAnimationFrame(animate);
    }

    // شروع اجرای انیمیشن
    animate();
  </script>

در این مثال، یک مستطیل رسم می‌شود و سپس با افزایش موقعیت x، مستطیل به سمت راست حرکت می‌کند. هر فریم با فراخوانی requestAnimationFrame(animate) ایجاد می‌شود.

برخی نکات کلیدی:

تعریف تابع animate: تمام کد انیمیشن باید درون یک تابع با نام معین (در اینجا animate) قرار گیرد.
clearRect: هر فریم قبل از رسم اشیاء جدید باید Canvas را پاک کنید. این کار با استفاده از context.clearRect انجام می‌شود.
تابع بازگشتی:

تابع animate در هر فریم به طور بازگشتی صدا زده می‌شود.
requestAnimationFrame(animate) باعث می‌شود تا مرورگر در زمان مناسب فراخوانی شود و انیمیشن به صورت بهینه ادامه یابد.
این مثال ساده را می‌توانید با اضافه کردن ترانزیشن‌ها، تداخل، و دیگر ویژگی‌ها برای انیمیشن‌های پیچیده‌تر گسترش دهید.

آموزش ایجاد انیمیشن‌های ساده با HTML Canvas

ساخت انیمیشن‌های ساده با استفاده از HTML Canvas اغلب از ترکیب توابع requestAnimationFrame و clearRect به همراه تغییر موقعیت یا ویژگی‌های مختلف اشیاء در Canvas انجام می‌شود. در ادامه، یک مثال از انیمیشن ساده با استفاده از Canvas آورده شده است:

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

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // متغیرهای مربوط به موقعیت اولیه دایره در انیمیشن
    var x = 50;
    var y = 100;
    var radius = 20;
    var speed = 2;

    // تابع اصلی انیمیشن
    function animate() {
      // پاک کردن Canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

      // رسم دایره
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI);
      context.fillStyle = 'blue';
      context.fill();
      context.closePath();

      // افزایش موقعیت برای ایجاد حرکت
      x += speed;

      // تغییر جهت حرکت در صورت رسیدن به حاشیه
      if (x + radius > canvas.width || x - radius < 0) {
        speed = -speed;
      }

      // فراخوانی دوباره تابع animate برای ادامه انیمیشن
      requestAnimationFrame(animate);
    }

    // شروع اجرای انیمیشن
    animate();
  </script>

در این مثال، یک دایره به طور پویا حرکت می‌کند. متغیرهایی مانند x و y برای موقعیت دایره، radius برای شعاع دایره و speed برای سرعت حرکت دایره تعریف شده‌اند.

مهمترین نکات:

requestAnimationFrame و clearRect: انیمیشن به کمک requestAnimationFrame که درون تابع بازگشتی (animate) فراخوانی می‌شود، انجام می‌شود. هر فریم قبل از رسم اشیاء جدید با استفاده از context.clearRect پاک می‌شود.
تغییر موقعیت:

تغییرات در موقعیت یا ویژگی‌های دیگر اشیاء در هر فریم ایجاد حرکت و انیمیشن را به وجود می‌آورند.
شرط تغییر جهت:

در این مثال، اگر دایره به حاشیه Canvas برسد، جهت حرکت عوض می‌شود.
این مثال ساده را می‌توانید با افزودن شیوه‌ها و ترفندهای بیشتر به انیمیشن‌های پیچیده‌تر تبدیل کنید.

  مفهوم وب ریسپانسیو - درس قبلی
درس بعدی - گرافیک SVG