با استفاده از Canvas API یک نمودار میلهای ساده رسم کنید که دادههای یک آرایه عددی را نمایش دهد و مقدار هر میله بهصورت عدد روی بالای آن نوشته شود.
9.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 01:53 0.0
یک عنصر در HTML بسازید و در جاوااسکریپت با canvas.getContext('2d') زمینهٔ نقاشی را بگیرید، سپس آرایهٔ اعداد را پیمایش کنید و با محاسبهٔ مقیاس نسبت به بیشینهٔ مقدار آرایه، ارتفاع هر میله را مشخص کنید؛ از fillRect برای کشیدن میلهها و fillText برای نوشتن مقدار روی هر میله استفاده کنید. نکات: عرض هر میله = (عرض کانتینر - فواصل) / تعداد، حاشیهها را در نظر بگیرید و قبل از رندر مجدد کانتکس را با clearRect پاک کنید؛ برای ظاهر بهتر از fillStyle و strokeStyle و حاشیهگذاری بین میلهها بهره ببرید.
توسط پژوهشگر در 198 روز قبل ساعت 01:53 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای جلوگیری از تاری در نمایش متن و خطوط روی صفحههای با چگالی پیکسلی بالا، کانواس را براساس window.devicePixelRatio بُرش زده و اندازهٔ واقعی بکرپت کنید و سپس scale(…) را اعمال کنید. متن روی هر میله را با ctx.textAlign = 'center' و ctx.textBaseline = 'bottom' رسم کنید و اندازهٔ فونت را نسبت به ارتفاع میله تعیین کنید تا هرگاه میله کوتاه بود عدد از بالا بیرون نزند؛ همچنین رنگ متن را طوری انتخاب کنید که کنتراست کافی با رنگ میله داشته باشد. عرض هر میله را بهصورت (width - 2*margin - gap*(n-1)) / n محاسبه کنید و قبل از رندر جدید حتماً با clearRect کانتکس را پاک کنید و از gap کوچک بین میلهها برای خوانایی استفاده کنید. اگر نمودار پویاست، از requestAnimationFrame برای رندر کردن استفاده کنید و برای بهبود ظاهر، حاشیهگذاری (stroke) یا سایهٔ سبک اضافه کنید.
گزارش