Task summaryWhat you will learn
You will learn how to build 2D graphics on a webpage using HTML and Javascript. How you will be assessed You will submit a 2D graphic of your choosing for assessment |
Key TerminologyHTML - scripting used to make webpages
Javascript - code used to create interactive elements on a webpage Canvas - A HTML tag which can be used for graphics Function - a section of code that only runs when it is called Parameter - a value that is given to a function when it is called |
Setting up a page
We are going to create graphics using HTML5. This comprises of two different types of script - HTML and Javascript. This code could be completed in something as simple as Notepad (as long as it is saved with .html extension) and opened in your web browser. This means you do not need to install any special software on your computer and you can complete this code anywhere you like.
However we are going to use a website called ICE Code Editor that allows us to code and see our changes in real time (this means we do not need to keep reloading the page).
Link: http://gamingjs.com/ice/
When you open the link, go to the menu and start a new, empty project.
You will see two types of HTML tag. HTML code goes inside the <body> tags and Javascript goes inside the <script> tags.
However we are going to use a website called ICE Code Editor that allows us to code and see our changes in real time (this means we do not need to keep reloading the page).
Link: http://gamingjs.com/ice/
When you open the link, go to the menu and start a new, empty project.
You will see two types of HTML tag. HTML code goes inside the <body> tags and Javascript goes inside the <script> tags.
The canvas
We need to set up a canvas that we can draw on in HTML. We do this using the <canvas> tag. As this is HTML it goes between the <body></body> tags. For pure aesthetic purposes, we also use a <div> tag to help centre the canvas to our screen.
The HTML is shown below. This will need to be present in all of your 2D graphic projects.
The HTML is shown below. This will need to be present in all of your 2D graphic projects.
Activities
1. Setup a canvas
Drawing a square/rectangle
We are going to draw a simple 2D square to the screen. We do this by drawing on our HTML canvas using Javascript. As this is Javascript, it goes between the <script></script> tags.
Here is the Javascript code and the result you should see on the screen. Watch the video for an explanation of how the code works.
Here is the Javascript code and the result you should see on the screen. Watch the video for an explanation of how the code works.
Activities
1. Create the same square as above
2. Change the width of the square to 200 pixels
3. Move the square to x = 50, y = 10
4. Change the colour of the square to red
5. Change the colour of the frame to blue
2. Change the width of the square to 200 pixels
3. Move the square to x = 50, y = 10
4. Change the colour of the square to red
5. Change the colour of the frame to blue
Drawing other shapes using paths
To draw other shapes we have to use paths. These are like drawing individual lines to the screen to make the shape we wish to create.
Activities
1. Create the two triangles above
2. Change the first triangle to have a blue outline
3. Change the second triangle to an equilateral triangle
4. Draw a hexagon or pentagon stroked shape
5. Try and change the width of the line on the shape you have made
2. Change the first triangle to have a blue outline
3. Change the second triangle to an equilateral triangle
4. Draw a hexagon or pentagon stroked shape
5. Try and change the width of the line on the shape you have made
Drawing other shapes using arcs
To draw non straight lines we use arcs. These work very similar to paths and can be combined to create shapes.
Activities
1. Create the arc above
2. Change the arc so it is drawn anticlockwise
3. Draw a circle
4. Draw a green filled circle with a red outline
5. Try and draw the Olympic rings (advanced task)
2. Change the arc so it is drawn anticlockwise
3. Draw a circle
4. Draw a green filled circle with a red outline
5. Try and draw the Olympic rings (advanced task)
If you wish to draw more complicated curves, you can read and try out some more advanced skills here:
http://tutorials.jenkov.com/html5-canvas/paths.html
http://tutorials.jenkov.com/html5-canvas/paths.html
Going for Gold
If you wish to learn more advanced 2D graphic skills, you can use this website to help you:
Colour Gradients
Object Shadows
Adding text to the canvas
Adding external images
Transforming/Rotating objects
Colour Gradients
Object Shadows
Adding text to the canvas
Adding external images
Transforming/Rotating objects
Assessment Task 1
Create a 2D graphic utilising the skills you have learnt. This could be an object like a house, a car or something more complicated if you prefer. Here is an example ->
You should comment every object that you draw explaining what it is. You need to submit the file you have created. Do this by downloading the text file from ICE. |