آموزش و یادگیری تگ canvas در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، ياد مي‌گيريم تگ <canvas> چيست و چگونه مي‌توان از آن براي رسم اشکال، انيميشن‌ها و گرافيک‌هاي پويا در صفحات وب استفاده کرد. اين تگ يکي از قدرتمندترين قابليت‌هاي HTML5 است و با کمک JavaScript کنترل مي‌شود.

تگ canvas در HTML چيست؟

تگ <canvas> يک بوم (Canvas) گرافيکي در اختيار توسعه‌دهنده قرار مي‌دهد تا با استفاده از JavaScript روي آن رسم انجام دهد. خود تگ به‌تنهايي چيزي نمايش نمي‌دهد، بلکه با اسکريپت مي‌توان روي آن نقاشي کرد.

ساختار کلي تگ canvas

<canvas id="myCanvas" width="400" height="200">
مرورگر شما از تگ Canvas پشتيباني نمي‌کند.
</canvas>

ويژگي‌هاي width و height اندازه بوم را تعيين مي‌کنند. متني که داخل تگ قرار مي‌گيرد، زماني نمايش داده مي‌شود که مرورگر از canvas پشتيباني نکند.

رسم شکل ساده با JavaScript

<canvas id="demoCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("demoCanvas");
const ctx = canvas.getContext("2d");

// رسم يک مستطيل آبي
ctx.fillStyle = "#2196f3";
ctx.fillRect(50, 40, 200, 80);
</script>

در اين مثال با استفاده از متد getContext("2d") يک محيط دوبعدي براي رسم ايجاد شده و با fillRect() يک مستطيل آبي رسم مي‌شود.

رسم دايره در Canvas

ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();

متد arc() براي رسم دايره‌ها استفاده مي‌شود و با fill() رنگ آن مشخص مي‌گردد.

ويژگي‌ها و صفات مهم تگ canvas

نکات حرفه‌اي درباره canvas

• براي کار با تگ <canvas> بايد از JavaScript استفاده کنيد؛ HTML به‌تنهايي کافي نيست.
• مي‌توانيد براي ساخت انيميشن‌ها، بازي‌هاي ساده و نمودارهاي گرافيکي از canvas استفاده کنيد.
• اگر به گرافيک سه‌بعدي نياز داريد، از WebGL در کنار canvas استفاده کنيد.
• استفاده از canvas در پروژه‌هاي تعاملي و بصري باعث افزايش جذابيت رابط کاربري مي‌شود.

افکت متن در canvas

ctx.font = "24px Tahoma";
ctx.fillStyle = "green";
ctx.fillText("سلام آموزش دون!", 50, 50);

با استفاده از متد fillText() مي‌توانيد متن‌ها را در موقعيت دلخواه روي بوم بنويسيد.

براي يادگيري کار با گرافيک، انيميشن و JavaScript در طراحي وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و JavaScript آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML و CSS، به صفحه اصلي آموزش دون مراجعه کنيد.