What is a canvas?
A canvas, is a drawing surface! As simple as that.
How is it used in HTML5?
The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.
A canvas, is a drawing surface! As simple as that.
How is it used in HTML5?
The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.
What is Javascript?
JavaScript is the programming language of the Web. All modern HTML pages are using JavaScript.
Let's get started!
Initial set up
Let's get started!
Initial set up
- You have a file, 'Lab-5-initial-page.zip' in your ICON. Download that.
- Remember to extract the file. Right click on the .zip file and click 'Extract all'. Now, you will have a folder named 'Lab-5-initial-page'.
- Go to the folder 'Lab-5-initial-page'.
- To view the design: Right click on 'Lab-5-initial.html' - click 'Open with' - click 'Google chrome'.
- To view the code: Right click on 'Lab-5-initial.html' and click 'Edit with Notepad++'. Now you will see the HTML/Javascript code.
- Now, you can edit in two ways:
- Edit the Notepad++ and view the changes on browser by refreshing it
- Or, copy all the code in your Notepad++ and paste them here http://codepen.io/pen/ and view the changes interactively.
Know what you have inside 'Lab-5-initial.html'
1. This is how you initialize a canvas. This means that, we are introducing a canvas, with id="myCanvas" and it has the given height and width. We initialize a canvas, inside the <body> tag or <head> tag.
<canvas id="myCanvas" width="500" height="600">
</canvas>
2. Start a script. The canvas element is the actual DOM node that's embedded in the HTML page. The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or webgl (3d).
Each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object.
Don't worry if you did not understand any of this. Just remember that, you need to define canvas element and context.
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
</script>
3. The cool part! Inside the script, you write functions to draw the shape.
ctx.beginPath(); // start new shape
ctx.fillStyle = "green"; // fill the color of the shape with green
ctx.lineWidth = 10; // border thickness
ctx.strokeStyle = "red"; // border color
// Draw the circle.
// (110,120) is the center point(x,y) - 80 is the radius of the circle - 0 is the start angle and //2*Math.PI is the ending angle (in radians)
ctx.arc(110, 120, 80, 0, 2*Math.PI);
ctx.fill(); // fill it with the color specified above
ctx.stroke(); // draw!
4. From here, use this websites to help you understand canvas functions.
Using those websites, accomplish the following tasks for Lab-5
- Colored shapes must be uniformly distributed on the canvas – shapes are not colliding with each other. Make sure it’s well aligned. (2 points)
- Draw a border to the canvas. Provide a message in case the browser does not support the canvas element. (1 point)
- Draw a circle – with a border, using the arc( ) method. (1 point)
- Draw another circle – filled with a gradient that has several color stops. (4 points)
- Write a message on the canvas using strokeText -- use a different gradient with several color stops as strokeStyle. (3 points)
- Draw a colored rectangle with borders using fillRect and strokeRect. (2 points)
- Draw at least 3 small circles of different colors on top of the rectangle. Note: No borders on these circles. (3 points)
After you finish, your final HTML page, should look something like this.
What to submit? (4 points)
If you did it using this - http://codepen.io/pen/ website, copy your code and paste it into your 'Lab-5-initial.html'.
Once you have your assignment ready, upload it to your MyWeb account and turn in the link and the .html file to your dropbox.
Refer:
No comments:
Post a Comment