معرفی عنصر Canvas در HTML

HTML Element

0 335

<canvas> چیست؟

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

  • مرورگر کروم: از نسخه ی 4 به بعد
  • مرورگر edge/IE: از نسخه ی 9 به بعد
  • مرورگر فایرفاکس: از نسخه ی 2 به بعد
  • مرورگر سافاری: از نسخه ی 3.1 به بعد
  • مرورگر اپرا: از نسخه ی 9 به بعد

<canvas> هیچ border یا محتوایی ندارد و یک مستطیل خالی در صفحه ی HTML است. نحوه ی ایجاد آن به شکل زیر است:

باید برای width و height آن اعداد مشخصی تعریف کنید تا اندازه ی درستی به دست بیاورید.

نکته: همیشه از یک id برای این عنصر استفاده کنید تا در اسکریپت تان استفاده شود.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

روش کلی کار در جاوا اسکریپت به این صورت است:

قدم اول: ابتدا یک canvas را پیدا کنید

قدم دوم: ایجاد شیء کشیدن

()getContext یکی از اشیاء پیش فرض و داخلی HTML است که خصوصیات و متد های مختلفی برای کشیدن اشکال مختلف دارد

قدم سوم: روی canvas طرحی را بکشید

ابتدا رنگ درون شکل خود را مشخص می کنیم

سپس برای مثال از متد fillRect استفاده می کنیم که یک مستطیل را می کشد. پارامتر اول محور x، پارامتر دوم محور y، پارامتر سوم عرض و پارامتر چهارم ارتفاع این مستطیل خواهند بود

مثال نهایی ما به این شکل خواهد بود:

مشاهده ی خروجی در JSBin

حالا که با کلیت آن آشنا شدیم بیایید چند نمونه اشکال مختلف را در آن بکشیم!

کشیدن یک خط صاف

مشاهده ی خروجی در JSBin

  • تابع moveTo نقطه ی شروع خط را مشخص می کند.
  • تابع lineTo نقطه ی پایان خط را مشخص می کند.
  • پس از مشخص کردن نقاط باید خط را به وسیله ی متد های مورد نظر بکشید (مثلا ()stroke و …)

کشیدن یک دایره

مشاهده ی خروجی در JSBin

  • beginPath یک path گرافیکی را مشخص می کند.
  • (arc(x,y,r,startangle,endangle یک منحنی می سازد. برای تبدیل این منحنی به دایره باید startangle (زاویه ی ابتدایی برای شروع) را روی 0 و endangle (زاویه ی نهایی) را روی Math.PI*2 بگذارید (PI همان عدد پی یعنی 3.14 است). مقادیر x و y نیز مختصات مرکز دایره را مشخص می کنند. r نیز همان radius یا شعاع دایره می باشد.

کشیدن یک نوشته

مشاهده ی خروجی در JSBin

شاید کمی گیج شده باشید. آیا می دانید تفاوت بین یک نوشته و کشیدن یک نوشته چیست؟ اگر یک نوشته را در صفحه ی خود قرار دهید (تایپ کنید) کاربر می تواند آن را کپی کند و با آن به عنوان یک متن رفتار کند اما اگر نوشته را به جاوا اسکریپت بدهید، دیگر آن نوشته از کاراکترها تشکیل نشده است بلکه از پیکسل تشکیل شده و یک نقاشی از کلمات شماست.

سوال: این قابلیت چه فایده ای دارد؟

پاسخ: از این مفهوم چه با canvas طراحی شود و چه با غیر آن، می توان در زمینه های مختلفی استفاده کرد که معروف ترین آن ها کد captcha است. در کدهای امنیتی captcha متن کج و موج نوشته می شود تا خواندنش سخت شود (که با تایپ عادی امکان پذیر نیست) و همچنین کاربر نباید قابلیت کپی کردن آن را داشته باشد (و گرنه ربات ها هم آن را کپی می کنند).

دادن stroke (دورچین) به متن

مشاهده ی خروجی در JSBin

کشیدن یک gradient خطی

مشاهده ی خروجی در JSBin

کشیدن یک gradient دایره ای

مشاهده ی خروجی در JSBin

قرار دادن تصاویر در canvas

مشاهده ی خروجی در JSBin

  • font نوع فونت و خصوصیاتش را تعیین می کند.
  • fillText متن را تو پر می نویسد.
  • strokeText متن را به صورت تو خالی و دورچین مینویسد.

به مثالی دیگر نیز دقت کنید:

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle