Once you are familiar with drawing basic shapes to a Canvas, you should then build a canvas with the following skyline.

Business, Finance, Economics, Accounting, Operations Management, Computer Science, Electrical Engineering, Mechanical Engineering, Civil Engineering, Chemical Engineering, Algebra, Precalculus, Statistics and Probabilty, Advanced Math, Physics, Chemistry, Biology, Nursing, Psychology, Certifications, Tests, Prep, and more.
Post Reply
answerhappygod
Site Admin
Posts: 899603
Joined: Mon Aug 02, 2021 8:13 am

Once you are familiar with drawing basic shapes to a Canvas, you should then build a canvas with the following skyline.

Post by answerhappygod »

Once you are familiar with drawing basic shapes to a Canvas, you
should then build a canvas with the following skyline.
Setting the Scene
Begin by adding a water and sky region to your skyline. These
regions should be separated by a small region representing the
ground.
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 1
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 1 (2.3 KiB) Viewed 42 times
Drawing Random Buildings
Create a function, called drawBuilding(). This should place a
building on the canvas with the following properties:
It is highly recommended that you create a function to generate
random integers within a range: [low, high]. Here is what that
function should look like in Javascript:
After writing your drawBuilding() function, you should test your
application. Invoke the drawBuilding() function and making sure
that, upon a page refresh, a random building is displayed on the
canvas. For example:
Drawing Windows
Once your building is showing up correctly, create a
drawWindows() function that draws a grid of windows for a building.
Use the following rules when drawing windows:
Here is an example of what a building might look like:
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 2
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 2 (9.69 KiB) Viewed 42 times
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 3
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 3 (38 KiB) Viewed 42 times
You should be using loops to draw the windows. You should start
by writing a loop that draws a single row of windows. For
example:
Note: You should notice that the only
numbers changing from window to window are the x-values for the
position of each window.
Note: You should note that the only
numbers changing from row to row are the y-values for the position
of each window.
Bringing It All Together
Call your drawBuilding() function 10-20 times (using a loop) to
generate a random skyline on the Canvas. Every time the page is
loaded a new and different skyline should appear.
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 4
Once You Are Familiar With Drawing Basic Shapes To A Canvas You Should Then Build A Canvas With The Following Skyline 4 (71.84 KiB) Viewed 42 times
(300, 100) (330, 130) (430, 130) (530, 130) 30 70 (330, 230) (430, 230) (530, 230) (330, 330) (430, 330) (530, 330)

圖1
Join a community of subject matter experts. Register for FREE to view solutions, replies, and use search function. Request answer by replying!
Post Reply