خانه / آموزش HTML / بخش شصت و دوم-بوم مرجع HTML
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۶ دی ۱۳۹۷ تعداد بازدید : 4 بازدید بدون دیدگاه

بخش شصت و دوم-بوم مرجع HTML

قدم قبلی >< قدم بعدی

بوم مرجع HTML

در این آموزش html به معرفی بوم مرجع HTML می پردازیم.

توضیحات

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

با این حال، عنصر <canvas> هیچ قابلیت نقاشی از خود ندارد (فقط یک ظرف برای گرافیک) – شما باید از یک اسکریپت برای ساخت گرافیک استفاده کنید.

روش getContext () یک شی را باز می کند که روش ها و خواص برای طراحی بر روی بوم را فراهم می کند.

این مرجع، خواص و روش های object getContext (“2d”) را می دهد که می تواند برای رسم متن، خطوط، جعبه ها، حلقه ها و موارد دیگر بر روی بوم استفاده شود.

رنگ ها، استایل ها و سایه ها

ویژگیتوضیحات
fillStyleرنگ، گرادیان یا الگوی مورد استفاده برای پر کردن نقاشی را تنظیم یا بازمی گرداند
strokeStyleرنگ، شیب، و یا الگوی مورد استفاده برای سکته ها را تعیین می کند
shadowColorرنگ برای استفاده از سایه ها را تعیین می کند یا آن را می گیرد
shadowBlurسطح تاری برای سایه ها را تنظیم می کند
shadowOffsetXفاصله افقی سایه را از شکل تنظیم یا بازگرداند
shadowOffsetYفاصله ای عمودی از سایه را از شکل تنظیم یا بر می گرداند
متدتوضیحات
()createLinearGradientیک شیب خطی ایجاد می کند (برای استفاده در محتوا بوم)
()createPatternتکرار یک عنصر مشخص در جهت مشخص شده
()createRadialGradientشیب شعاعی / دایره ای ایجاد می کند (برای استفاده در محتوا بوم)
()addColorStopرنگ ها را مشخص می کند و موقعیت ها را در یک شی گرادیان متوقف می کنند

استایل های خط

ویژگیتوضیحات
lineCapسبک کلاههای پایان را برای یک خط تعیین می کند یا به آن باز می گرداند
lineJoinهنگامی که دو خط با یکدیگر روبرو می شوند، نوع گوشه ای ایجاد می شود یا بر می گرداند
lineWidthعرض خط فعلی را تنظیم یا باز می کند
miterLimitطول حداکثر میت را تنظیم یا به حداکثر می رساند

مستطیل

ویژگیتوضیحات
rect()یک مستطیل را ایجاد می کند
fillRect()یک مستطیل “پر” را به تصویر می کشد
strokeRect()یک مستطیل را ترسیم می کند (بدون پر کردن)
clearRect()پیکسل های مشخص شده را در یک مستطیل داده پاک می کند

راه ها

متدتوضیحات
fill()نقاشی فعلی (مسیر) را پر می کند
stroke()در واقع مسیری را که تعریف کرده اید ترسیم می کند
beginPath()مسیر را آغاز می کند یا مسیر فعلی را بازنشانی می کند
moveTo()مسیر را به نقطه مشخص شده در بوم، بدون ایجاد یک خط حرکت می دهد
closePath()یک مسیر را از نقطه فعلی به نقطه شروع می برد
lineTo()یک نقطه جدید اضافه می کند و از نقطه آخرین مشخص شده در بوم یک خط به آن نقطه می دهد
clip()کلیپ های یک منطقه از هر شکل و اندازه از بوم اصلی
quadraticCurveTo()منحنی Bézier درجه دوم را ایجاد می کند
bezierCurveTo()منحنی Bézier مکعبی ایجاد می کند
arc()ایجاد یک قوس / منحنی (برای ایجاد حلقه ها یا بخش هایی از حلقه ها)
arcTo()منحنی دو قوس را ایجاد می کند
isPointInPath()اگر نقطه مشخص شده در مسیر فعلی درست باشد، در غیر اینصورت کاذب را درست می کند

تغییرات

متدتوضیحات
scale()مقیاس رسم کنونی بزرگتر یا کوچکتر
rotate()نقاشی کنونی را تکان می دهد
translate()جایگزین (۰،۰) روی بوم است
transform()جایگزین ماتریس تبدیل فعلی برای نقاشی است
setTransform()تغییر فعلی را به ماتریس هویت بازنشانی می کند. سپس اجرا می شود

متن

ویژگیتوضیحات
fontخواص فونت فعلی برای محتوای متن را تنظیم می کند
textAlignتراز فعلی برای محتوای متن تنظیم یا جابجا می شود
textBaselineهنگام طراحی متن استفاده می شود
متدتوضیحات
fillText()نوشتن متن “پر” بر روی بوم
strokeText()نوشتن متن روی بوم (بدون پر کردن)
measureText()یک شیء را که حاوی عرض متنی مشخص شده را برمی گرداند

تصویر برداری

متدتوضیحات
drawImage()یک تصویر، بوم یا ویدیو را روی بوم می کشد

دستکاری پیکسل

ویژگیتوضیحات
widthعرض یک شیء ImageData را می پردازد
heightارتفاع یک شی ImageData را می دهد
dataیک شیء را که حاوی داده های تصویری از شیء ImageData مشخص شده است، بازمی گرداند
متدتوضیحات
createImageData()یک شی جدید ImageData خالی ایجاد می کند
getImageData()یک شی ImageData که داده های پیکسل را برای یک مستطیل مشخص شده روی یک بوم باز می کند
putImageData()داده های تصویر (از یک شیء ImageData مشخص شده) را بر روی بوم قرار می دهد

کامپوزیت

ویژگیتوضیحات
globalAlphaارزش آلفای یا شفاف فعلی نقاشی را تنظیم یا باز می گرداند
globalCompositeOperationچگونه یک تصویر جدید بر روی یک تصویر موجود کشیده می شود یا بر می گرداند

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=12209


کانال تلگرام تیک تم

مطلب پیشنهادی

رنگ های HTML

بخش شصت و یکم-رنگ های HTML

در این آموزش html به معرفی رنگ های HTML می پردازیم. نام های رنگی پشتیبانی شده …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *