In this exercise, you create a square, a rectangle, a triangle, and two circles. When you have completed the objects, you will have created a vehicle. Then, you will animate that vehicle.
To complete the tasks required, you should:
- Understand HTML5 in general
- Understand the basics of JavaScript
- Create a canvas that is 600 by 400 pixels.
- Draw a square at x and y coordinates 210 and 240 with a width and height of 65. Fill the square black.
- Draw a rectangle at x and y coordinates 0 and 175 with a width of 200 and height of 125. Fill the rectangle black.
- Draw a triangle that starts at coordinates 210,175. The second coordinate is 275,235, the third coordinate is 210,235, and the final coordinate takes you back to the starting position: 0,175. Fill the triangle black.
- Draw two circles. The first circle has an x value of 250, a y value of 330, and a radius of 20. The second circle has an x value of 50, a y value of 330, and a radius of 20. The fill color for both circles should be #800000, and the stroke color should be black. The line should be 5 pixels.
- You should now be able to see the vehicle drawn by the coordinates given above. Now
that you have drawn the vehicle, move it using the
ifstatement shown in Listing 1. Use the value created—positionX—to animate the truck by altering the x coordinates.
Listing 1. If statement that creates the position value
if (positionX < 600)
{
positionX += 1;
}
else
{
positionX = -175;
}
|
Follow these solution steps to check your work.
-
"HTML5
fundamentals, Part 4: The final touch" (developerWorks, July 2011)
provides an overview of the HTML5 Canvas, ranging from simple objects to
multiple-canvas animation.
-
"Create
great graphics with the HTML5 canvas" (developerWorks, February 2011)
is a guide to the development of graphical techniques and processes.
-
The Apple Safari Dev Center has a demo called
Canvas Pixel
Manipulation that is an excellent example of managing the canvas to develop
effective visual assets.
-
WHATWG HTML
Living Standard provides a window into the evolving development of the
HTML5 Canvas specs.
-
W3Schools.com HTML5 Canvas
reference has several useful exercises to help you hone your Canvas knowledge
and use as a tool.
-
MDM Docs Canvas tutorial is
a good, basic tutorial that reflects the development expertise of Mozilla.
-
Let's Call It A Draw(ing Surface) is an
innovative walk-through for a basic comprehension of HTML5 Canvas.
-
The Dojo Toolkit, an open source modular
JavaScript library, helps you quickly develop cross-platform JavaScript- and Ajax-based
applications and websites.
-
In "New elements in
HTML 5" (developerWorks, August 2007), you will find
information for several of the new elements in HTML5.
-
The <html>5doctor, website provides an
excellent view of the current trends in HTML5 today.
-
The W3Schools.com: HTML5
Tag Reference provides an extensive list of the HTML5 tags and definitions as
well as examples.
-
The WHATWG
website provides detailed information for the HTML5 specification.
-
Stay current with developerWorks
technical events and webcasts focused on a variety of IBM products and IT
industry topics.
-
Follow developerWorks on Twitter.
Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.
Table of contents
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags