مرجع بوم در HTML

از موتو کد، دانشنامهٔ برنامه‌نویسی

توضیحات

برچسب <canvas> در HTML برای رسم کارهای گرافیکی، بصورت شناور، از طریق کدنویسی (معمولاً جاوااسکریپت) است.[۱]

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

روش (متد) getContext() یک شی را بازگشت می‌دهد که روش‌ها و ویژگی‌هایی برای ترسیم بروی canvas (canvas) را ارائه می‌کند.

این مرجع ویژگی‌ها و روش‌های شی getContext("2d") را پوشش می‌دهد، که می‌توان از آن برای ترسیم متن، خطوط، جعبه‌ها، دایره‌ها، و موارد دیگر - بروی canvas استفاده کرد.

رنگ‌ها، سبک‌ها و سایه‌ها

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

سبک‌های خطوط

ویژگی توضیحات
lineCap سبک کلاهک‌های پایانی برای یک خط را تنظیم می‌کند یا بازگشت می‌دهد
lineJoin نوع گوشهٔ ایجاد شده، موقعی که دو خط برخورد می‌کنند، را تنظیم می‌کند یا بازگشت می‌دهد
lineWidth پهنای خط کنونی را تنظیم می‌کند یا بازگشت می‌دهد
miterLimit بیشینهٔ طول تاج (طول تاج فاصلهٔ بین گوشهٔ درونی و گوشهٔ بیرونی جایی‌ست که دو خط با هم برخورد می‌کنند) را تنظیم می‌کند یا بازگشت می‌دهد

مستطیل‌ها

روش توضیحات
rect() یک مستطیل می‌سازد
fillRect() یک مستطیل «پر شده» ترسیم می‌کند
strokeRect() یک مستطیل (پر نشده) ترسیم می‌کند
clearRect() پیکسل‌های مشخص‌شده را درون مستطیل داده‌شده پاکسازی می‌کند

مسیرها

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

تبدیل‌ها

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

متن

ویژگی توضیحات
font ویژگی‌های فونت کنونی را برای محتوای متن تنظیم می‌کند یا بازگشت می‌دهد
textAlign هم‌ترازی کنونی برای محتوای متن را تنظیم می‌کند یا بازگشت می‌دهد
textBaseline پایهٔ متن کنونی را تنظیم می‌کند یا بازگشت می‌دهد که موقع رسم متن استفاده می‌شود
روش توضیحات
fillText() یک متن «پرشده» بروی canvas رسم می‌کند
strokeText() متن را بروی canvas رسم می‌کند (پرنشده)
measureText() یک شی را بازگشت می‌دهد که دارای عرض متن مشخص‌شده‌است

رسم تصویر

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

بکاربری پیکسل

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

ترکیب

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

دیگر موارد

روش توضیحات
save() وضعیت زمینهٔ کنونی را ذخیره می‌کند
restore() وضعیت و ویژگی‌های مسیر ذخیره‌شدهٔ اخیر را بازگشت می‌دهد
createEvent()
getContext()
toDataURL()

منابع آموزشی