For my static example, I have decided to draw a bee.
At first, I thought it would be something simple to draw. Then I started to make it and had to use:
- Arcs (Circles)
- Bezier Curves
- Quadratic Curves
- Rectangles &
I think this is a good demonstration of the possibilities of HTML5 Canvas. Images on screens are usually square or rectangular, to draw such a curved object takes a lot of time and plotting.
View Code: Link to Static Canvas Code
This is my moving example. I created this to help me with my assignment. The ball moves from Point 1 to Point 2, by choosing a value from a slider, you can choose how unstable the ball is.
In my Assignment, I aim to have a helicopter that is moving along, incoming sensor data will change it's path. Shaking it should not make it harder to control, since it stays on the line (var line), but rather make it 'bigger' as when it shakes, it take up a space upto 14 pixels bigger than the ball actually is, thus making the game harder.
How to use:
- Use the 'Bounce' slider to determine how unstable the ball is, you can do this while the ball is moving
- Press 'Go' to start the ball moving
Note: You will have to refresh the page to use again.
View Code: Link to Moving Canvas Code
Snippets of code from other websites have been linked to in code comments.
- Week 1 - code-master.zip. 2015. Blackboard [ONLINE] Available at: https://bblive.uclan.ac.uk/webapps/blackboard/content/listContent.jsp?course_id=_37705_1&content_id=_693316_1&mode=reset. [Accessed 9 February 2015].
- Modernizr: the feature detection library for HTML5/CSS3. 2015. Modernizr: the feature detection library for HTML5/CSS3. [ONLINE] Available at: http://modernizr.com/. [Accessed 13 February 2015].