Page 1 of 1

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

Posted: Fri May 20, 2022 2:37 pm
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 43 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 43 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 43 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 43 times
(300, 100) (330, 130) (430, 130) (530, 130) 30 70 (330, 230) (430, 230) (530, 230) (330, 330) (430, 330) (530, 330)

圖1