دستورالعمل مرجع Canvas HTML

دستورالعمل مرجع Canvas HTML

برچسب <canvas> HTML برای رندرینگ گرافیک‌ها به صورت پویا با استفاده از اسکریپت‌ها (معمولاً JavaScript) استفاده می‌شود.

برای اطلاعات بیشتر در مورد <canvas>، لطفاً به آموزش HTML Canvas ما بخوانید.

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

ویژگی‌ها توضیحات
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() منحنی کابلی دوگانه ایجاد کنید
bezierCurveTo() منحنی کابلی سه‌گانه ایجاد کنید
arc() یک منحنی/ارتباط ایجاد کنید (برای ایجاد دایره یا بخشی از دایره)
arcTo() یک منحنی/ارتباط بین دو خط تیغه ایجاد کنید
isPointInPath() اگر نقطه مشخص شده در مسیر فعلی قرار دارد، true بازگرداند، در غیر این صورت false بازگرداند

تبدیل

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

متن

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

ترسیم تصویر

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

عملیات پیکسلی

ویژگی‌ها توضیحات
width عرض ImageData را بازگرداند
height ارتفاع ImageData را بازگرداند
data یک شیء بازگردانده می‌شود که شامل داده‌های تصویر ImageData مشخص شده است
روش توضیحات
createImageData() ImageData جدید خالی ایجاد کنید
getImageData() ImageData对象的返回，该对象包含画布上指定矩形的像素数据
putImageData() داده‌های تصویر (از ImageData مشخص شده) را به کanvas برمی‌گرداند

ترکیب

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

دیگر

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