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.
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:
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.
(300, 100) (330, 130) (430, 130) (530, 130) 30 70 (330, 230) (430, 230) (530, 230) (330, 330) (430, 330) (530, 330)
圖1
Once you are familiar with drawing basic shapes to a Canvas, you should then build a canvas with the following skyline.
-
- Site Admin
- Posts: 899603
- Joined: Mon Aug 02, 2021 8:13 am