با استفاده از Canvas API یک نقاشی ساده از یک خانه (مستطیل بدنه، مثلث سقف، در و دو پنجره) رسم کنید و دو دکمه بسازید که رنگ سقف و رنگ دیوار را تغییر دهند.
8.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:16 0.0
یک عنصر canvas در HTML قرار دهید و با document.getElementById(...).getContext('2d') به زمینهٔ دوبعدی دسترسی پیدا کنید. از متدهای fillRect برای بدنه و در، beginPath/moveTo/lineTo و fill برای رسم سقف مثلثی و از strokeRect یا arc برای پنجرهها استفاده کنید؛ با تنظیم fillStyle و strokeStyle رنگها را تعیین نمایید. دو دکمه در صفحه قرار دهید و با addEventListener('click') برای هر کدام رنگ مربوطه را تغییر داده، canvas را با clearRect پاک و دوباره تابع رسم خانه (مثلاً drawHouse(x,y,w,h)) را با رنگهای جدید فراخوانی کنید. نکات: مختصات و اندازهها را ثابت و ساده نگه دارید و قسمت رسم را در یک تابع جدا قرار دهید تا بازنشانی و تغییر رنگ آسان شود.
توسط پژوهشگر در 201 روز قبل ساعت 03:16 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
خیلی خوب است که بازنشانی و رنگآمیزی خانه را در یک تابع drawHouse قرار بدهید تا تغییر رنگها آسان باشد. قبل از redraw، canvas را با ctx.clearRect(0,0,canvas.width,canvas.height) پاک کنید تا اثر رنگهای قبلی از بین برود. برای دریافت رنگها از هر دو دکمه میتوانید از dataset استفاده کنید و با event.target.dataset.color رنگ سقف یا دیوار را تغییر دهید و دوباره تابع رسم را فراخوانی کنید. مطمئن شوید مقادیر ابعاد ثابت بمانند تا رفتار رسم ساده و قابل پیشبینی باشد.
گزارش