با استفاده از Canvas API یک نمودار میلهای ساده بسازید که مقادیر یک آرایه عددی را نمایش دهد.
1.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 01:52 0.0
در یک صفحه HTML یک عنصر <canvas> قرار داده و با JavaScript با ctx = canvas.getContext('2d') به آن دسترسی پیدا کنید، سپس عرض هر میله را با تقسیم عرض canvas بر تعداد مقادیر محاسبه کرده و ارتفاع هر میله را با نسبت دادن مقدار به بیشینهٔ آرایه به ارتفاع قابل رسم نگاشت کنید؛ برای کشیدن از ctx.fillRect استفاده کنید و با ctx.fillText برچسب یا مقدار هر میله را اضافه کنید. تکنولوژی اصلی: Canvas API در جاوااسکریپت؛ نکات مفید: حتماً خواص width و height را بهصورت attribute روی عنصر canvas تنظیم کنید (نه فقط با CSS)، از Math.max برای پیدا کردن بیشینه استفاده کنید، و برای وضوح بهتر میتوانید قبل از رسم ctx.clearRect را صدا بزنید یا برای افکت رنگی از ctx.fillStyle و گرادیانها بهره ببرید.
توسط پژوهشگر در 198 روز قبل ساعت 01:52 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای نمودار میلهای با Canvas، اطمینان حاصل کنید که عرض و ارتفاع کانواس بهعنوان attributes مشخص شدهاند تا پیکسلها واضح باشند. مقدار حداکثر آرایه را با Math.max پیدا کنید تا ارتفاع هر میله نسبت به بیشینه محاسبه شود و عرض هر میله را با تقسیم عرض کانواس بر تعداد مقادیر بدست آورید. برای وضوح بهتر در دستگاههای با DPI بالا از devicePixelRatio استفاده کنید و اندازههای نقشه را با آن همسانسازی کنید؛ همچنین با ctx.clearRect قبل از دوبارهکشیدن صفحه را پاک کنید. برای برچسب زدن از ctx.fillText استفاده کنید و در صورت نیاز از گرادیان یا رنگهای مختلف برای جذابیت بیشتر بهره ببرید.
گزارش