کتابخانه‌ی استاندارد · وب و مرورگر

بوم `web/canvas`

رسم شکل، متن و تصویر روی عنصر canvas در مرورگر.

واردسازی وب.بوم

در این صفحه

روال‌ها

بوم روال‌های ساده‌ای برای رسم دوبعدی روی عنصر canvas می‌دهد. مثل دام، برنامه با salam js برای مرورگر ترجمه می‌شود. با دریافت بوم زمینه‌ی رسم را بگیرید و همه‌ی روال‌ها را با آن صدا بزنید. مختصات از گوشه‌ی بالا و چپ آغاز می‌شود و محور عمودی رو به پایین است.

روال‌ها

دریافت بوم `Get`

روال دریافت بوم(id: رشته): صحیح۶۴

زمینه‌ی رسم دوبعدی عنصر canvas با این شناسه.

web-canvas-Draw.salam

واردسازی دام
واردسازی وب.بوم

روال ریشه:
    ب := دام.بساز("canvas")
    دام.تنظیم ویژگی(ب، "id"، "board")
    دام.تنظیم ویژگی(ب، "width"، "320")
    دام.تنظیم ویژگی(ب، "height"، "200")
    دام.افزودن(دام.بدنه()، ب)
    ز := بوم.دریافت بوم("board")
    سرچاپ بوم.عرض(ز)، بوم.ارتفاع(ز)

    بوم.سبک پرشدگی(ز، "#f5f0e6")
    بوم.پرکردن مستطیل(ز، ۰، ۰، بوم.عرض(ز)، بوم.ارتفاع(ز))
    بوم.سبک پرشدگی(ز، "#2a7")
    بوم.مستطیل گرد(ز، ۲۰، ۲۰، ۱۲۰، ۶۰، ۱۲)
    بوم.پرکن(ز)
    بوم.سبک خط(ز، "#333")
    بوم.ضخامت خط(ز، ۲)
    بوم.خط مستطیل(ز، ۱۶۰، ۲۰، ۱۲۰، ۶۰)
    بوم.پاک کردن مستطیل(ز، ۱۷۰، ۳۰، ۲۰، ۲۰)

    بوم.شروع مسیر(ز)
    بوم.برو به(ز، ۲۰، ۱۸۰)
    بوم.خط به(ز، ۱۰۰، ۱۰۰)
    بوم.خط به(ز، ۱۸۰، ۱۸۰)
    بوم.بستن مسیر(ز)
    بوم.بکش(ز)
    بوم.شروع مسیر(ز)
    بوم.کمان(ز، ۲۵۰، ۱۴۰، ۳۰، ۰، ۶.۲۸۳۲)
    بوم.شفافیت(ز، ۰.۵)
    بوم.پرکن(ز)
    بوم.شفافیت(ز، ۱)

    بوم.ذخیره وضعیت(ز)
    بوم.جابجایی مختصات(ز، ۱۶۰، ۱۰۰)
    بوم.چرخش(ز، ۰.۲)
    بوم.مقیاس(ز، ۱.۵، ۱.۵)
    بوم.قلم(ز، "16px Vazirmatn")
    بوم.ترازبندی متن(ز، "center")
    بوم.سبک پرشدگی(ز، "#000")
    بوم.پرکردن متن(ز، "سلام"، ۰، ۰)
    بوم.بازگردانی وضعیت(ز)

    عکس := دام.بارگذاری تصویر("logo.png")
    اگر دام.تصویر آماده(عکس):
        بوم.رسم تصویر(ز، عکس، ۲۶۰، ۱۰، ۵۰، ۵۰)
    پایان
    دوم := بوم.زمینه عنصر(دام.بساز("canvas"))
    سرچاپ دوم != ۰
پایان

زمینه عنصر `Of`

روال زمینه عنصر(el: صحیح۶۴): صحیح۶۴

زمینه‌ی رسم یک عنصر canvas که در دست دارید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

عرض `Width`

روال عرض(c: صحیح۶۴): اعشار۶۴

عرض بوم بر حسب پیکسل.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

ارتفاع `Height`

روال ارتفاع(c: صحیح۶۴): اعشار۶۴

ارتفاع بوم.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

سبک پرشدگی `FillStyle`

روال سبک پرشدگی(c: صحیح۶۴، v: رشته)

رنگ پر کردن، مثل #2a7 یا red.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

سبک خط `StrokeStyle`

روال سبک خط(c: صحیح۶۴، v: رشته)

رنگ خط‌ها.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

ضخامت خط `LineWidth`

روال ضخامت خط(c: صحیح۶۴، v: اعشار۶۴)

ضخامت خط‌ها.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

قلم `Font`

روال قلم(c: صحیح۶۴، v: رشته)

قلم متن به زبان CSS، مثل 16px Vazirmatn.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

ترازبندی متن `TextAlign`

روال ترازبندی متن(c: صحیح۶۴، v: رشته)

ترازبندی افقی متن: left، center یا right.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

شفافیت `Alpha`

روال شفافیت(c: صحیح۶۴، v: اعشار۶۴)

شفافیت همه‌ی رسم‌های بعدی، از ۰ تا ۱.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

پرکردن مستطیل `FillRect`

روال پرکردن مستطیل(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، w: اعشار۶۴، h: اعشار۶۴)

مستطیل پر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

خط مستطیل `StrokeRect`

روال خط مستطیل(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، w: اعشار۶۴، h: اعشار۶۴)

دور یک مستطیل.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

پاک کردن مستطیل `ClearRect`

روال پاک کردن مستطیل(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، w: اعشار۶۴، h: اعشار۶۴)

بخشی از بوم را پاک و شفاف می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

مستطیل گرد `RoundRect`

روال مستطیل گرد(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، w: اعشار۶۴، h: اعشار۶۴، r: اعشار۶۴)

مستطیل با گوشه‌های گرد را به مسیر می‌افزاید؛ بعد پرکن یا بکش را صدا بزنید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

شروع مسیر `BeginPath`

روال شروع مسیر(c: صحیح۶۴)

مسیر تازه‌ای آغاز می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

بستن مسیر `ClosePath`

روال بستن مسیر(c: صحیح۶۴)

مسیر را به نقطه‌ی آغازش می‌بندد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

برو به `MoveTo`

روال برو به(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴)

قلم را بدون کشیدن به این نقطه می‌برد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

خط به `LineTo`

روال خط به(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴)

پاره‌خطی تا این نقطه به مسیر می‌افزاید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

کمان `Arc`

روال کمان(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، r: اعشار۶۴، a: اعشار۶۴، b: اعشار۶۴)

کمانی به مرکز و شعاع داده‌شده، از زاویه‌ی آغاز تا پایان بر حسب رادیان؛ دایره‌ی کامل از ۰ تا ۲π است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

پرکن `Fill`

روال پرکن(c: صحیح۶۴)

درون مسیر را پر می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

بکش `Stroke`

روال بکش(c: صحیح۶۴)

خط مسیر را می‌کشد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

پرکردن متن `FillText`

روال پرکردن متن(c: صحیح۶۴، t: رشته، x: اعشار۶۴، y: اعشار۶۴)

متن را در این نقطه می‌نویسد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

ذخیره وضعیت `Save`

روال ذخیره وضعیت(c: صحیح۶۴)

رنگ‌ها، قلم و تبدیل‌های فعلی را نگه می‌دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

بازگردانی وضعیت `Restore`

روال بازگردانی وضعیت(c: صحیح۶۴)

آخرین وضعیت نگه‌داشته را برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

جابجایی مختصات `Translate`

روال جابجایی مختصات(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴)

مبدا مختصات را جابه‌جا می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

چرخش `Rotate`

روال چرخش(c: صحیح۶۴، a: اعشار۶۴)

رسم‌های بعدی را به این زاویه بر حسب رادیان می‌چرخاند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

مقیاس `Scale`

روال مقیاس(c: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴)

رسم‌های بعدی را بزرگ یا کوچک می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam

رسم تصویر `DrawImage`

روال رسم تصویر(c: صحیح۶۴، img: صحیح۶۴، x: اعشار۶۴، y: اعشار۶۴، w: اعشار۶۴، h: اعشار۶۴)

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

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-canvas-Draw.salam