تگ canvas در HTML⌨️
🔸 تگ <canvas> در HTML5 یک عنصر قدرتمند برای ایجاد گرافیک‌های پویا و تعاملی به طور مستقیم در صفحات وب شما است. این عنصر یک ناحیه مستطیلی مانند یک بوم خالی را ارائه می‌دهد که می‌توانید با استفاده از JavaScript و API Canvas اشکال، تصاویر و متن را در آن ترسیم کنید.
🔷 نکات کلیدی:
هدف: ایجاد پویای گرافیک‌های دوبعدی در صفحات وب.
عملکرد: به JavaScript برای ترسیم و دستکاری نیاز دارد.
خروجی: تصاویر پیکسلی (بیت‌مپ) تولید می‌کند.
کاربردها: به طور گسترده برای انیمیشن‌ها، بازی‌ها، نمودارها، تجسم داده‌ها و موارد دیگر استفاده می‌شود.
یک نمونه کد:
▪️ویژگی‌های width و height: عرض و ارتفاع بوم را به پیکسل مشخص می‌کنند. این ویژگی‌ها برای تعریف ناحیه ترسیم ضروری هستند.
⚠️ این پست دو بخش میشه چون بخش دوم با جاوااسکریپت ترکیبش میکنیم. ممنونیم که کد اکسپلور رو دنبال میکنید ❤️
#html #canvas
☕️ @CodeExplore
هدف: ایجاد پویای گرافیک‌های دوبعدی در صفحات وب.
عملکرد: به JavaScript برای ترسیم و دستکاری نیاز دارد.
خروجی: تصاویر پیکسلی (بیت‌مپ) تولید می‌کند.
کاربردها: به طور گسترده برای انیمیشن‌ها، بازی‌ها، نمودارها، تجسم داده‌ها و موارد دیگر استفاده می‌شود.
یک نمونه کد:
<canvas width="200" height="100"></canvas>
▪️ویژگی‌های width و height: عرض و ارتفاع بوم را به پیکسل مشخص می‌کنند. این ویژگی‌ها برای تعریف ناحیه ترسیم ضروری هستند.
#html #canvas
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡21❤🔥4🔥4
تگ canvas در HTML (بخش دوم)⌨️
🔹 قبل از شروع ، اگر پست مربوط به پارت یک رو نخوندید ، از اینجا بخونید. همونطور که توی پست قبل گفتیم ، توی این بخش قراره canvas رو با جاوااسکریپت ترکیب کنیم.
🔸 استفاده از JavaScript با Canvas:
1️⃣ دریافت آیدی: از document.getElementById() برای دریافت مرجع عنصر canvas در کد JavaScript خود استفاده کنید.
2️⃣ دریافت Context: متد getContext() را در عنصر canvas صدا کنید و "2d" را به عنوان آرگومان برای دریافت 2D rendering context ارسال کنید. این Context Object روش‌های مختلفی برای ترسیم ارائه میده.
3️⃣ شروع ترسیم: از روش‌های Context Object برای ترسیم اشکال، خطوط، تصاویر و متن استفاده کنید. برخی از روش‌های رایج عبارتند از:
▪️fillRect(x, y, width, height): یک ناحیه مستطیلی را پر می‌کند.
▪️strokeRect(x, y, width, height): یک خط دور مستطیل را ترسیم می‌کند.
▪️beginPath(): یک مسیر جدید برای ترسیم اشکال را آغاز می‌کند.
▪️moveTo(x, y): نقطه شروع یک مسیر را تعیین می‌کند.
▪️lineTo(x, y): نقطه فعلی را با یک خط به یک نقطه جدید متصل می‌کند.
▪️closePath(): مسیر فعلی را می‌بندد.
▪️stroke(): خطوط مسیر فعلی را ترسیم می‌کند.
▪️fillStyle: رنگ پر کردن (fill) را برای اشکال تعیین می‌کند.
▪️strokeStyle: رنگ خطوط (stroke) را برای خطوط تعیین می‌کند.
▪️fillText(text, x, y): متن را در یک موقعیت مشخص ترسیم می‌کند.
مثال:
این کد یک مستطیل قرمز و یک خط آبی را در بوم ایجاد می‌کند.
#html #javascript #canvas
☕️ @CodeExplore
▪️fillRect(x, y, width, height): یک ناحیه مستطیلی را پر می‌کند.
▪️strokeRect(x, y, width, height): یک خط دور مستطیل را ترسیم می‌کند.
▪️beginPath(): یک مسیر جدید برای ترسیم اشکال را آغاز می‌کند.
▪️moveTo(x, y): نقطه شروع یک مسیر را تعیین می‌کند.
▪️lineTo(x, y): نقطه فعلی را با یک خط به یک نقطه جدید متصل می‌کند.
▪️closePath(): مسیر فعلی را می‌بندد.
▪️stroke(): خطوط مسیر فعلی را ترسیم می‌کند.
▪️fillStyle: رنگ پر کردن (fill) را برای اشکال تعیین می‌کند.
▪️strokeStyle: رنگ خطوط (stroke) را برای خطوط تعیین می‌کند.
▪️fillText(text, x, y): متن را در یک موقعیت مشخص ترسیم می‌کند.
مثال:
<canvas id="myCanvas" width="300" height="150"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 100);
ctx.stroke();این کد یک مستطیل قرمز و یک خط آبی را در بوم ایجاد می‌کند.
#html #javascript #canvas
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
کداکسپلور | CodeExplore
تگ canvas در HTML⌨️
🔸تگ <canvas> در HTML5 یک عنصر قدرتمند برای ایجاد گرافیک‌های پویا و تعاملی به طور مستقیم در صفحات وب شما است. این عنصر یک ناحیه مستطیلی مانند یک بوم خالی را ارائه می‌دهد که می‌توانید با استفاده از JavaScript و API Canvas اشکال، تصاویر…
🔸تگ <canvas> در HTML5 یک عنصر قدرتمند برای ایجاد گرافیک‌های پویا و تعاملی به طور مستقیم در صفحات وب شما است. این عنصر یک ناحیه مستطیلی مانند یک بوم خالی را ارائه می‌دهد که می‌توانید با استفاده از JavaScript و API Canvas اشکال، تصاویر…
⚡13🔥3❤🔥1💔1
<canvas> توی HTML مثل یه صفحه نقاشی خالیه که باهاش می‌تونی هرچی دلت می‌خواد بکشی. البته خودش چیزی نشون نمی‌ده؛ باید با جاوااسکریپت (یه زبان برنامه‌نویسی که توی وب استفاده میشه) بهش بگی چی بکشه.- عرض و ارتفاع (width و height): اینا اندازه صفحه نقاشیت رو مشخص می‌کنن. اگه نذاری، خودش یه اندازه پیش‌فرض داره (300 در 150 پیکسل).
- جاوااسکریپت: با جاوااسکریپت می‌تونی روی این صفحه نقاشی خط بکشی، دایره و مستطیل بکشی، یا حتی عکس بذاری.
یه مثال ساده:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
مرورگر شما از تگ Canvas پشتیبانی نمی‌کند.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// کشیدن یه مستطیل قرمز
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 75);
</script>
</body>
</html>
اینجا یه صفحه نقاشی به اندازه 200 در 100 پیکسل درست کردیم و با جاوااسکریپت توش یه مستطیل قرمز کشیدیم. این کارها رو با چند خط کد ساده انجام دادیم.
- کشیدن نمودارها و گراف‌ها
- رسم شکل‌های دوبعدی
- انیمیشن‌های ساده
- بازی‌های تحت وب
#canvas #html #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12⚡4❤🔥2