The Hong Kong Polytechnic University COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3 Page 1 of 16 Lab 3 – HTML 5 Canvas & CSS3 Objective After this lab session, you will - Get further understanding on the usage of JavaScript - Hands-on-experience in using DOM and external JavaScript file in HTML documents - Hands-on-experience in using HTML 5 Canvas - Hands-on-experience in using CSS3 - Exercise on Page 3, 5, 7. Additional Exercise om Page 12. Laboratory More on HTML 5 elements A. Create a new web page called lab3a.html with the following code. You are going to learn how to link with the external JavaScript. <html> <head> <title>COMP321</title> <script type="text/javascript" src="test.js"> </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html> Create a JavaScript file called test.js using the following code and store it in the same directory with the file lab3a.html function displaymessage() { alert("Hello World!"); } i. Place lab3a.html and test.js under directory public_html ii. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3a.html iii. Check the result
16
Embed
Lab 3 – HTML 5 Canvas & CSS3 - No-IPfoss.ddns.net/notes/polyu/peter/2014-15sem1/COMP3421/Lab3...The Hong Kong Polytechnic University COMP3421 Web Application Design and Development
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
The Hong Kong Polytechnic University
COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3
Page 1 of 16
Lab 3 – HTML 5 Canvas & CSS3
Objective After this lab session, you will
- Get further understanding on the usage of JavaScript
- Hands-on-experience in using DOM and external JavaScript file in HTML documents
- Hands-on-experience in using HTML 5 Canvas
- Hands-on-experience in using CSS3
- Exercise on Page 3, 5, 7. Additional Exercise om Page 12.
Laboratory
More on HTML 5 elements
A. Create a new web page called lab3a.html with the following code. You are going to
vi. Place lab3Part2b.html under directory public_html
vii. Go to http://www.comp.polyu.edu.hk/~{your student id}/lab3Part2b.html
viii. Check the result
Exercise D. Create a new web page called lab3part3a.html with the following code. Complete the
Code inside the loop until a checker pattern is displayed.
<html> <body> <canvas id="e" width="300" height="300" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("e"); var cxt = canvas.getContext("2d"); var mapArray = [ [0,1,0], [1,0,1], [0,1,0] ]; var cellSize = 100; for(var i in mapArray){ for (var j in mapArray[i]){ // Coding } }
The Hong Kong Polytechnic University
COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3
Page 8 of 16
</script> </body> </html>
E. Modify the code as following. setInterval() is used to redraw the display by recall
draw() in each 0.1s. Try to draw a circle and animate as shown.
<!DOCTYPE HTML> <html> <body> <canvas id="e" width="300" height="300" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var canvas = document.getElementById("e"); var cxt = canvas.getContext("2d"); var mapArray = [ [0,0,0], [0,0,1], [0,1,0] ]; var cellSize = 100; var mainChar = [1,0]; var timeCounter = 1.0;
The Hong Kong Polytechnic University
COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3
Page 9 of 16
function draw(){ cxt.clearRect(0,0,300,300); for(var i in mapArray){ for (var j in mapArray[i]){ if (mapArray[i][j] == 1){ cxt.fillStyle="#DDDDDD"; cxt.fillRect(i*cellSize,j*cellSize,100,100); } } }
COMP3421 Web Application Design and Development Lab 3 – HTML 5 Canvas & CSS3
Page 15 of 16
max = _____;
min = ______;
}
else
{
max = Math.___(___, max);
min = Math.____(____, min);
}
}
alert("The max. number is " + max + "\n\nThe min. number is "
+ min);
}
</script>
</head>
<body onload="__________________">
</body>
</html>
5. Create a new web page called lab3_5.html with the following code, you are going to build a simple clock in the web page. Place this file under your web directory and see the result.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"