آشنایی با canvas | سکان آکادمی

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

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

ساخت اولین گرافیک با Canvas در HTML5

برای شروع، وارد محیط ویرایشگر VS Code می‌شویم و در بخش <body> یک تگ <canvas> اضافه می‌کنیم. این تگ همانند تگ <svg> نیاز به تعیین ابعاد دارد.
در این مثال، یک عنصر Canvas با شناسه (id) canvas-1 و ابعاد ۲۰۰ پیکسل عرض و ۱۰۰ پیکسل ارتفاع ایجاد می‌کنیم. همچنین، برای مشاهده بهتر، یک حاشیه (border) به آن اختصاص می‌دهیم با ضخامت ۱ پیکسل، نوع خط solid و رنگ قرمز. در نتیجه، یک مستطیل قرمز در صفحه ظاهر خواهد شد.

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>گرافیک با html - Canvas</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body dir="rtl">
  <h1 align="center">پیاده سازی گرافیک با CANVAS</h1>
  <hr />
  <br />

  <canvas
    id="canvas-1"
    width="200"
    height="100"
    style="border:1px solid red;"
  ></canvas>

</body>
</html>

نکته مهم این است که برخلاف SVG که عناصر گرافیکی به‌صورت مستقیم در HTML تعریف می‌شدند، در Canvas گرافیک‌ها به‌صورت مستقیم از طریق کدنویسی در JavaScript رسم می‌شوند. در واقع، آنچه درون Canvas دیده می‌شود، بخشی از محتوای HTML محسوب نمی‌شود، بلکه با استفاده از API جاوااسکریپت در فضای اختصاصی Canvas ترسیم شده است.
پس برای رسم گرافیک در Canvas نیاز به JavaScript داریم. به‌عنوان مثال، قصد داریم یک مستطیل ساده رسم کنیم. ابتدا باید تگ <script> را اضافه کنیم تا بتوانیم کدهای جاوااسکریپت را بنویسیم.
منطق کلی به این صورت است:

ابتدا عنصر Canvas را از طریق شناسه‌اش (id) دریافت می‌کنیم.
سپس از آن یک "context" می‌گیریم، که مانند گرفتن یک کاغذ از دفتر طراحی است؛ این context محیطی است که در آن می‌توانیم شروع به رسم اشکال کنیم.

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

در این مثال، از دستور document.getElementById("canvas1") استفاده می‌کنیم تا به عنصر مورد نظر دسترسی پیدا کنیم. سپس این عنصر را در یک متغیر به نام canvas-1 ذخیره می‌کنیم تا بتوانیم راحت‌تر از آن استفاده کنیم.

<script>
  var can1 = document.getElementById("canvas-1");
  var ctx1 = can1.getContext("2d");
</script>

در هر بار استفاده از تگ <canvas> باید شناسه‌ای منحصربه‌فرد برای آن تعریف کنید و همین دو خط کد را برای شروع رسم در آن تکرار نمایید.

رسم مستطیل رنگی با متد fillRect

اکنون که context مورد نظر را در اختیار داریم، می‌توانیم اولین شکل هندسی را رسم کنیم. برای رسم یک مستطیل رنگی از متد ()fillRect استفاده می‌کنیم. این متد چهار پارامتر می‌پذیرد:

X – مختصات افقی نقطه‌ی شروع (کنج بالا سمت چپ مستطیل)
Y – مختصات عمودی نقطه‌ی شروع
Width (W) – عرض مستطیل
Height (H) – ارتفاع مستطیل

لازم به ذکر است که مختصات (۰,۰) در Canvas گوشه بالا سمت چپ آن است. بنابراین اگر بخواهیم مستطیلی را در نقطه‌ی (۲۵, ۲۵) با عرض ۱۰۰ و ارتفاع ۵۰ پیکسل رسم کنیم، کد آن به صورت زیر خواهد بود:

<script>

  var can1 = document.getElementById("canvas-1");
  var ctx1 = can1.getContext("2d");
  
  
ctx1.fillRect(50,25,100,25); 
  

</script>

با اجرای این کد، یک مستطیل پررنگ در مکان مشخص شده روی Canvas ظاهر خواهد شد:

رسم مستطیل رنگی با متد fillRect روی canvas

به طور پیش‌فرض، مستطیل با رنگ مشکی پر می‌شود. اگر بخواهید مستطیل به صورت توخالی رسم شود (بدون رنگ داخلی)، از متد clearRect استفاده می‌کنیم. اما اگر بخواهید فقط دور مستطیل مشخص باشد (مشابه قاب یا حاشیه)، باید از متد strokeRect استفاده کنید. با این روش، تنها خطوط دور مستطیل رسم می‌شود.

تغییر رنگ یا اعمال گرادیان در Canvas با fillStyle

برای تغییر رنگ شکل‌های رسم‌شده در Canvas، باید از ویژگی fillStyle استفاده کنید. این ویژگی باید قبل از اجرای متد ترسیم (مانند fillRect) مقداردهی شود. در غیر این صورت، رنگ پس از ترسیم اعمال نمی‌شود. برای مثال، اگر بخواهیم رنگ مستطیل را به آبی تغییر دهیم، می‌توانیم کد زیر را بنویسیم:

ctx1.fillStyle = "blue";

ctx1.fillRect(50,25,100,25);

همچنین می‌توان به‌جای کد رنگی، از گرادیان یا الگوهای تصویری نیز در fillStyle استفاده کرد. این قابلیت به ما اجازه می‌دهد جلوه‌های گرافیکی متنوعی ایجاد کنیم.

رسم دایره کامل با استفاده از متد arc در Canvas

برای رسم دایره در Canvas از متد ()arc استفاده می‌کنیم. در واقع، دایره یک کمان کامل با زاویه ۳۶۰ درجه است. ساختار کلی این متد به شکل زیر است:

x, y: مختصات مرکز دایره
radius: شعاع دایره
startAngle: زاویه شروع (بر حسب رادیان)
endAngle: زاویه پایان (برای دایره کامل: 2 * Math.PI)
anticlockwise: (اختیاری) اگر true باشد، مسیر رسم پادساعت‌گرد خواهد بود

نمونه کد برای رسم یک دایره با مرکز (100, 50) و شعاع 25 پیکسل:

<body dir="rtl">

  <canvas id="canvas-1" width="200" height="100" style="border:1px solid red;"></canvas>
  <canvas id="canvas-2" width="200" height="100" style="border:1px solid red;"></canvas>

  <script>
    var can1 = document.getElementById("canvas-1");
    var ctx1 = can1.getContext("2d");

    var can2 = document.getElementById("canvas-2");
    var ctx2 = can2.getContext("2d");

    ctx1.fillStyle = "blue";
    ctx1.fillRect(50, 25, 100, 25);

    ctx2.beginPath();
    ctx2.arc(100, 50, 25, 0, 2 * Math.PI);
    ctx2.stroke();
  </script>

</body>

افزودن متن به Canvas با متد fillText

پس از رسم اشکال، می‌توان متن نیز به Canvas اضافه کرد. برای نوشتن متن روی Canvas از متد ()fillText استفاده می‌شود. ساختار این متد به‌صورت زیر است:

text: متنی که می‌خواهید نمایش داده شود.
x, y: مختصات مکانی که متن از آنجا شروع می‌شود.

نکته: اگر سند HTML شما راست‌به‌چپ (RTL) باشد، جهت‌نمایی متن در Canvas با توجه به زبان نوشته‌شده و موقعیت‌دهی تعیین می‌شود. برای متون انگلیسی در سند RTL، مختصات داده‌شده به ابتدای متن اختصاص می‌یابد.

برای سفارشی‌سازی ظاهر متن نیز می‌توان از ویژگی‌هایی مانند font و fillStyle استفاده کرد.

در صورتی که بخواهید متن را به صورت توخالی (فقط خطوط دور حروف) رسم کنید، می‌توانید از متد ()strokeText استفاده کنید. این متد نیز از همان پارامترهای fillText پیروی می‌کند. در نهایت کد این قسمت به صورت زیر تغییر خواهد کرد:

<body dir="rtl">
    <h1 align="center">پیاده سازی گرافیک با CANVAS</h1>
    <hr>
    <br>

    <canvas id="canvas-3" width="200" height="100" style="border:1px solid red;"></canvas>

    <script>

        var can3 = document.getElementById("canvas-3");
        var ctx3 = can3.getContext("2d");        
        
        // ایجاد نوشته
        ctx3.font = "20px Arial";
        ctx3.fillText("Hello!", 100, 50);
        ctx3.strokeText("World!", 100, 80);
       
    </script>
  
</body>

رسم خط در Canvas با استفاده از moveTo و lineTo

برای ترسیم یک خط ساده در عنصر Canvas، باید مراحل زیر را دنبال کنید:

تعیین نقطه شروع خط با moveTo(x, y)
مشخص کردن نقطه پایانی با lineTo(x, y)
اجرای دستور رسم با ()stroke

مثال:

<canvas id="canvas-4" width="200" height="100" style="border:1px solid red;"></canvas>

<script>   
    
   var can4 = document.getElementById("canvas-4");
   var ctx4 = can4.getContext("2d");
        
   // رسم خط
   ctx4.moveTo(0,0);
   ctx4.lineTo(100,50);
   ctx4.stroke();
   
</script>

نتیجه رسم خط در Canvas با استفاده از moveTo و lineTo

ایجاد گرادیان رنگی در Canvas

یکی از قابلیت‌های مهم Canvas، امکان استفاده از گرادیان (تغییر تدریجی رنگ) در رسم اشکال است. برای ساخت گرادیان خطی، از متد ()createLinearGradient استفاده می‌شود. این متد چهار مقدار به‌عنوان مختصات شروع و پایان گرادیان دریافت می‌کند:

var grd1 = ctx5. createLinearGradient(0,0,200,0);

grd1.addColorStop(0,"blue");  
grd1.addColorSto-p(1,"white");
  
ctx5.fillStyle = grd1; 
ctx5.fillRect(50,25,100,50);

پس از تعریف گرادیان، می‌توان با متد addColorStop(offset, color) رنگ‌های دلخواه را به آن اضافه کرد. مقدار offset عددی بین ۰ و ۱ است که موقعیت نسبی رنگ را مشخص می‌کند.در این مثال، یک گرادیان افقی از رنگ آبی تیره به آبی روشن تعریف شد.

ساخت گرادیان دایره‌ای در Canvas

گرادیان دایره‌ای در Canvas از متد ()createRadialGradient استفاده می‌کند. این گرادیان با استفاده از مختصات دو دایره، یکی برای مرکز و دیگری برای انتهای گرادیان، ایجاد می‌شود. در این مثال، یک گرادیان دایره‌ای با دو دایره تعریف شده است: دایره اول با مرکز (100, 50) و شعاع ۳۰، و دایره دوم با همان مرکز و شعاع ۱۰۰. رنگ‌ها از آبی به سفید تغییر می‌کنند.

var grd2 = ctx5.createRadialGradient(100,50,2,100,50,100);  

grd2.addColorStop (0,"blue");  
grd2.addColorStop (1,"white");
  
ctx5.fillStyle = grd2;  
ctx5.fillRect(50,25,100,50);

برای بهتر دیده شدن اثر گرادیان، می‌توانید مختصات و شعاع‌ها را تغییر دهید. به‌عنوان مثال، شعاع دایره اول را کوچکتر و دایره دوم را بزرگ‌تر کنید.

جمع بندی

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