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

بوم `web/canvas`

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

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

در این صفحه

نمودار ستونی از داده
پویانمایی: پاک کن، جابه‌جا کن، بکش
کلیک و تصویر
چرخاندن با ذخیره و بازگردانی وضعیت
تابع‌ها

این بسته تابع‌های ساده‌ای برای رسم دوبعدی روی عنصر <canvas> می‌دهد: نمودار، بازی ساده، امضا و نمودارهای خطی. مثل دام، برنامه با salam js برای مرورگر ترجمه می‌شود و عنصرها، رویدادها و زمان‌سنج‌های پیرامون رسم از دام می‌آیند. برای فشردن کلید در حلقه‌ی بازی کلیدها را بیفزایید؛ برای ساختن تصویر در سمت سرور و ذخیره در پرونده تصویر را ببینید.

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

چیزهایی که بیشتر غافلگیر می‌کنند:

اندازه را با ویژگی‌های width و height بگذارید، نه با CSS. CSS تصویر را می‌کشد؛ ویژگی‌ها تعداد پیکسل‌ها را تعیین می‌کنند.
شکل‌هایی که از مسیر ساخته می‌شوند تا شروع مسیر روی هم جمع می‌شوند؛ بخش آخر را ببینید.
تصویر تا بار نشده چیزی رسم نمی‌کند. پیش از رسم تصویر با دام.تصویر آماده بسنجید.
جای موش در دام.رویداد افقی نسبت به پنجره است. برای رسیدن به مختصات بوم، جای بوم را از getBoundingClientRect کم کنید.
فقط فراخوانی‌های رایج پوشانده شده‌اند. گرادیان، measureText و بقیه با دام.فراخوان و تابع‌های دام.تنظیم ... روی زمینه در دسترس‌اند.

نمودار ستونی از داده

کشیدن نمودار بیشتر حساب است: هر مقدار را به یک بلندی و هر شماره را به یک جای افقی تبدیل کنید و چون محور عمودی رو به پایین است، از پایین به بالا بکشید. اندازه‌ی بوم را با ویژگی‌های width و height تعیین کنید نه با CSS؛ CSS فقط تصویر را کش می‌دهد، ولی این ویژگی‌ها تعیین می‌کنند روی چند پیکسل می‌کشید. ترازبندی متن با "center" باعث می‌شود پرکردن متن هر برچسب را روی همان x که می‌دهید وسط‌چین کند.

web-canvas-bar-chart.salam

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

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "chart")
    دام.تنظیم ویژگی(عنصر، "width"، "420")
    دام.تنظیم ویژگی(عنصر، "height"، "240")
    دام.افزودن(دام.بدنه()، عنصر)
    بوم من := بوم.دریافت بوم("chart")

    ماه‌ها := ["فروردین"، "اردیبهشت"، "خرداد"، "تیر"، "مرداد"، "شهریور"]
    فروش := [۴۲.۰، ۵۵.۰، ۳۸.۰، ۷۱.۰، ۶۴.۰، ۸۰.۰]
    بیشینه := ۱۰۰.۰
    پایه := ۲۰۰.۰
    پهنای ستون := ۴۰.۰
    فاصله := ۲۴.۰

    بوم.سبک خط(بوم من، "#999")
    بوم.ضخامت خط(بوم من، ۱)
    بوم.شروع مسیر(بوم من)
    بوم.برو به(بوم من، ۳۰، پایه)
    بوم.خط به(بوم من، ۴۱۰، پایه)
    بوم.بکش(بوم من)

    بوم.قلم(بوم من، "13px sans-serif")
    بوم.ترازبندی متن(بوم من، "center")
    هر ش، مقدار در فروش:
        افقی := ۴۰.۰ + (ش برگردان اعشار۶۴) * (پهنای ستون + فاصله)
        بلندی := مقدار / بیشینه * ۱۶۰.۰
        بوم.سبک پرشدگی(بوم من، "#3b82f6")
        بوم.شروع مسیر(بوم من)
        بوم.مستطیل گرد(بوم من، افقی، پایه - بلندی، پهنای ستون، بلندی، ۴)
        بوم.پرکن(بوم من)
        بوم.سبک پرشدگی(بوم من، "#222")
        بوم.پرکردن متن(بوم من، ماه‌ها[ش]، افقی + پهنای ستون / ۲، پایه + ۱۸)
        بوم.پرکردن متن(بوم من، "" + (مقدار برگردان صحیح)، افقی + پهنای ستون / ۲، پایه - بلندی - ۶)
    پایان
پایان

این برنامه‌ها در مرورگر اجرا می‌شوند و این‌جا فقط بررسی می‌شوند؛ روش اجرایشان را ببینید.

پویانمایی: پاک کن، جابه‌جا کن، بکش

پویانمایی در هر فریم همه‌ی تصویر را دوباره می‌کشد. چرخش فریم از dom پیش از هر بازنقاشی تابع شما را صدا می‌زند، معمولاً ۶۰ بار در ثانیه. هر فراخوانی چیزها را کمی جابه‌جا می‌کند، پس‌زمینه را روی فریم قبلی می‌کشد و همه چیز را دوباره رسم می‌کند. وضعیت را در متغیرهای سراسری نگه دارید تا از فریمی به فریم بعد بماند.

web-canvas-bounce.salam

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

ناپایا افقی := ۶۰.۰
ناپایا عمودی := ۶۰.۰
ناپایا گام افقی := ۳.۰
ناپایا گام عمودی := ۲.۰
ناپایا بوم من := ۰ برگردان صحیح۶۴

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "box")
    دام.تنظیم ویژگی(عنصر، "width"، "360")
    دام.تنظیم ویژگی(عنصر، "height"، "220")
    دام.افزودن(دام.بدنه()، عنصر)
    بوم من = بوم.دریافت بوم("box")
    شعاع := ۱۴.۰

    دام.چرخش فریم((گذشته: اعشار۶۴):
        _ := گذشته
        پهنا := بوم.عرض(بوم من)
        بلندی := بوم.ارتفاع(بوم من)
        افقی += گام افقی
        عمودی += گام عمودی
        اگر افقی کوچکتر شعاع یا افقی بزرگتر پهنا - شعاع:
            گام افقی = ۰.۰ - گام افقی
        پایان
        اگر عمودی کوچکتر شعاع یا عمودی بزرگتر بلندی - شعاع:
            گام عمودی = ۰.۰ - گام عمودی
        پایان
        بوم.سبک پرشدگی(بوم من، "#10131a")
        بوم.پرکردن مستطیل(بوم من، ۰، ۰، پهنا، بلندی)
        بوم.شروع مسیر(بوم من)
        بوم.کمان(بوم من، افقی، عمودی، شعاع، ۰، ۶.۲۸۳۲)
        بوم.سبک پرشدگی(بوم من، "#f59e0b")
        بوم.پرکن(بوم من)
    پایان)
پایان

سرعت این‌جا برای هر فریم است، پس توپ روی نمایشگر ۱۲۰ هرتز تندتر می‌رود. برای سرعت یکسان همه‌جا، آن را در آرگومان تابع فریم ضرب کنید: این آرگومان زمان گذشته از فریم قبلی به میلی‌ثانیه است و حداکثر ۱۰۰ (تا زبانه‌ی پنهان باعث پرش نشود). چرخنده‌ی زیر همین‌طور کار می‌کند.

کلیک و تصویر

رسمی که به موش واکنش نشان می‌دهد جای کلیک را به مختصات بوم لازم دارد. دام.رویداد افقی و دام.رویداد عمودی از پنجره اندازه گرفته می‌شوند، پس برنامه کادر بوم را با دام.فراخوان(صفحه بوم، "getBoundingClientRect") می‌پرسد و left و top را کم می‌کند. هر کلیک همان‌جا یک تصویر مهر می‌زند. دام.بارگذاری تصویر بارگیری را بی‌درنگ آغاز می‌کند و تصویر را برمی‌گرداند؛ تا دام.تصویر آماده نگوید رسیده است، کلیک کاری نمی‌کند. کلیک راست صفحه را پاک می‌کند، پس از آن‌که جلوگیری پیش فرض جلوی منوی مرورگر را گرفت.

web-canvas-stamp.salam

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

ناپایا ز := ۰ برگردان صحیح۶۴
ناپایا صفحه بوم := ۰ برگردان صحیح۶۴
ناپایا مهر := ۰ برگردان صحیح۶۴
ناپایا شمار مهرها := ۰

تابع پاک کردن صفحه():
    بوم.سبک پرشدگی(ز، "#f1f5f9")
    بوم.پرکردن مستطیل(ز، ۰، ۰، بوم.عرض(ز)، بوم.ارتفاع(ز))
    بوم.سبک پرشدگی(ز، "#334155")
    بوم.قلم(ز، "14px sans-serif")
    بوم.ترازبندی متن(ز، "right")
    بوم.پرکردن متن(ز، "برای گذاشتن مهر کلیک کنید"، ۳۹۰، ۲۰)
پایان

تابع ریشه:
    صفحه بوم = دام.بساز("canvas")
    دام.تنظیم ویژگی(صفحه بوم، "width"، "400")
    دام.تنظیم ویژگی(صفحه بوم، "height"، "260")
    دام.افزودن(دام.بدنه()، صفحه بوم)
    ز = بوم.زمینه عنصر(صفحه بوم)
    مهر = دام.بارگذاری تصویر("stamp.png")
    پاک کردن صفحه()

    دام.هنگام رویداد جزئی(صفحه بوم، "click"، (ر: صحیح۶۴):
        اگر وارونه دام.تصویر آماده(مهر): برگشت پایان
        کادر := دام.فراخوان(صفحه بوم، "getBoundingClientRect")
        جای افقی := دام.رویداد افقی(ر) - دام.دریافت خاصیت عددی(کادر، "left")
        جای عمودی := دام.رویداد عمودی(ر) - دام.دریافت خاصیت عددی(کادر، "top")
        بوم.رسم تصویر(ز، مهر، جای افقی - ۱۶، جای عمودی - ۱۶، ۳۲، ۳۲)
        شمار مهرها += ۱
        دام.تنظیم عنوان(شمار مهرها + " مهر")
    پایان)
    دام.هنگام رویداد جزئی(صفحه بوم، "contextmenu"، (ر: صحیح۶۴):
        دام.جلوگیری پیش فرض(ر)
        پاک کردن صفحه()
        شمار مهرها = ۰
    پایان)
پایان

یک stamp.png کنار صفحه بگذارید. اگر CSS بوم را بزرگ‌تر یا کوچک‌تر از ویژگی width نشان دهد، جای کلیک را هم در بوم.عرض(ز) / عرض کادر ضرب کنید.

چرخاندن با ذخیره و بازگردانی وضعیت

جابجایی مختصات، چرخش و مقیاس دستگاه مختصات را جابه‌جا می‌کنند نه شکل‌ها را، و روی همه‌ی رسم‌های بعدی اثر دارند. آن‌ها را میان ذخیره وضعیت و بازگردانی وضعیت بگذارید تا تغییر همان‌جا که می‌خواهید تمام شود. چرخنده‌ی زیر مبدا را به مرکز می‌برد و یک ستون کوچک را دوازده بار می‌کشد و هر بار یک دوازدهم دایره می‌چرخد و شفافیت را بالا می‌برد.

web-canvas-spinner.salam

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

ناپایا بوم من := ۰ برگردان صحیح۶۴
ناپایا زاویه := ۰.۰

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "spin")
    دام.تنظیم ویژگی(عنصر، "width"، "120")
    دام.تنظیم ویژگی(عنصر، "height"، "120")
    دام.افزودن(دام.بدنه()، عنصر)
    بوم من = بوم.دریافت بوم("spin")

    دام.چرخش فریم((گذشته: اعشار۶۴):
        زاویه += گذشته / ۴۰۰.۰
        بوم.پاک کردن مستطیل(بوم من، ۰، ۰، ۱۲۰، ۱۲۰)
        بوم.ذخیره وضعیت(بوم من)
        بوم.جابجایی مختصات(بوم من، ۶۰، ۶۰)
        بوم.چرخش(بوم من، زاویه)
        تکرار ۱۲ در ش:
            بوم.شفافیت(بوم من، (ش برگردان اعشار۶۴ + ۱.۰) / ۱۲.۰)
            بوم.سبک پرشدگی(بوم من، "#0ea5e9")
            بوم.شروع مسیر(بوم من)
            بوم.مستطیل گرد(بوم من، -۴، -۴۴، ۸، ۱۸، ۴)
            بوم.پرکن(بوم من)
            بوم.چرخش(بوم من، ۶.۲۸۳۲ / ۱۲.۰)
        پایان
        بوم.بازگردانی وضعیت(بوم من)
    پایان)
پایان

زاویه‌ها به رادیان‌اند: یک دور کامل حدود ۶.۲۸۳۲ است. شفافیت هم بخشی از وضعیت ذخیره شده است، پس بازگردانی وضعیت در پایان آن را هم به ۱ برمی‌گرداند.

یک دام: مستطیل گرد، برو به، خط به و کمان به مسیر جاری اضافه می‌کنند و پرکن همه‌ی آن را پر می‌کند. بدون شروع مسیر پیش از هر شکل، دوازدهمین پرکن در این برنامه هر دوازده ستون را دوباره با شفافیت کامل می‌کشید و دنباله‌ی کم‌رنگ از بین می‌رفت. پرکردن مستطیل و خط مستطیل بی‌درنگ می‌کشند و به مسیر دست نمی‌زنند.

تابع‌ها

دریافت بوم `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"))
    سرچاپ دوم != ۰
پایان