Upload
paul-murphy
View
219
Download
0
Tags:
Embed Size (px)
Citation preview
HTML 5
Previous version: HTML4.01, 1999
Still work in progress, most browsers support some of it
HTML 5
• New features based on HTML, CSS, DOM, Javascript
• Reduces need for externals plugins (like Flash, ..)
• “Should be” device independent
HTML 5 – interesting features
• <canvas> element tag for 2D drawing
• <audio> and <video> for media playback
• Other new elements ( <article>, <footer>, <mark>, ...)
• Support for local storage
• New form controls (calendar, ..)
HTML 5 – Canvas element
• Focus on <canvas> element
• A container for graphics
• ( 0, 0 ) is top left corner of canvas
• Need to use a script to draw the graphics
• Supported by IE9, Firefox, Safari, Opera, Chrome
500 X 200 Canvas element
(0, 0) (500, 0)
(200, 0) (500, 200)
HTML 5
• getContext( “2d” ) returns a CanvasRenderingContext2D object that allows to draw on the canvas
could ultimately reduce need for Flash• var can =
document.getElementsByTagName( “canvas” )[0];
• var context = can.getContext( “2d” );
HTML 5
• Draw and paint text, lines, rectangles, circles, polygons, images, ..
• Save and restore state of context
• Change coordinate system (rotate, translate, ..)
• Gradients, shadows, images (access pixels), ..
HTML 5 – setting the context
• Set value of fillStyle and strokeStyle of the context
• rgb 3 parameters• rgba 4th parameter is for opacity value
• context.fillStyle = "rgb(255, 0, 0 )";• context.strokeStyle = "rgba(0, 255, 0, 0.8 )";
• 20% transparent (80% opaque)
HTML 5 – rectangle
• To paint the inside of a rectangle, use fillRect; to draw the rectangle, use strokeRect (x and y are relative to the canvas)
• void fillRect ( float x, float y, float width, float height);
• void strokeRect ( double x, double y, double width, double height);
HTML 5 – rectangle
• To clear a rectangle• void clearRect ( float x, float y, float width, float height);
• Color used is the color of the canvas
HTML 5 – drawing shapes
• Set context (stroke and/or fill color)
• Start a “path” to draw or fill
context.beginPath( );• Build the path• Close the path (or not)• Draw it or fill it
HTML 5 - line
• To draw a line
context.beginPath( );
context.moveTo( 50, 50 ); // start point
context.lineTo( 250, 50 );
context.stroke( );
// use current strokeStyle color
HTML 5 - polygon
• // build a polygon
context.beginPath( );
context.moveTo( 50, 100 );
context.lineTo( 250, 100 );
context.lineTo( 120, 180 );
context.lineTo( 80, 150 );
context.closePath( ); // close the polygon
HTML 5 - polygon
• Now draw the polygon (defined by the current path)
context.stroke( ); • Now fill the polygon (defined by the current path)
context.fill( );
HTML 5 – arcs and circles
• A circle is an arc that is full
• An arc is a portion of a circle defined by a start angle and an endAngle
• Need center, radius, and whether the drawing is clockwise or counterclockwise
HTML 5 – arcs and circles
• void arc ( float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise);
• Angles are in radians, measured from x axis, going clockwise
• If endAngle – startAngle = 2 * PI ( or a multiple of 2 * PI ) circle
• If endAngle – startAngle = PI ( or –PI) half circle
HTML 5 – arcs and circles
• // build an arc
context.beginPath( );
x = 200; // relative to canvas
y = 100; // relative to canvas
radius = 50;
startAngle = 0;
endAngle = Math.PI / 4; // 45 degrees
anticlockwise = true;
HTML 5 – arcs and circles
context.arc( x, y, radius, startAngle, endAngle, anticlockwise );
• Draw the arc
context.stroke( );• Fill the arc
context.fill( );
HTML 5 – arcs and circles
• Not what you expected for the filling of the arc?
Fill 2 half circles instead
HTML 5 – Pacman
• Paint the Pacman, Paint the full circle, erase the full circle, Paint the Pacman, ..
• Need to do the above with some time between the paintings (otherwise too fast)
• Can make Pacman move
HTML 5 – More Pacman
• Can make Pacman move responding to an event ( right key for example)
• onkeydown event