Html5

Robin Nixon

• Publisher: QuickStudy Reference Guides
• Year: 2009
• ISBN:
  9781423237167
• Topic: Computer Science
• Subtopic: Computer Science General
• Index: Computer Science

If you are at all familiar with HTML, chances are you want to know more about the cutting-edge digital development toolbox, HTML5. Whether you are building your knowledge base from scratch or you are a seasoned user of HTML, this guide will be an excellent reference source to learn more about the changes and additions to HTML that will be affecting a browser near you!

Programming

Many of the improvements and enhancements to HTML that have been added in HTML5 relate to JavaScript and the programming environment. Note that many of these elements require that a web page is served by a web server and may not run correctly if loaded directly from a computer file system. On local computers, you should install a web server, such as the free Zend Server CE, and serve files from http://localhost.

The <canvas> Element

The <canvas> element creates a drawing area within the browser that can be written to (and read from) using JavaScript in conjunction with a variety of attributes offering a range of drawing methods. [CFIOS]

Functions

• addColorStop(p,c) Adds a stop color c to a gradient at position p.
• arc(x,y,r,s,e,d) Creates an arc at position x,y with radius r, start angle s, and end angle e, in direction d.
• arcTo(x1,y1,x2,y2,r) Creates an arc of radius r, starting at x1,y1 and ending at x2,y2.
• beginPath() Begins a new path or resets the current path.
• bezierCurveTo(x1,y1,x2,y2,x3,y3) Creates a Bézier curve around control points at x1,y1 and x2,y2, ending at x3,y3.
• clearRect(x,y,w,h) Creates a clear rectangle with its top left at x,y and a width and height of w and h.
• clip() Clips the current path to restrain the drawing area.
• closePath() Closes the current path.
• createImageData(w,h,i) Creates a new imagedata object with width and height w and h, optionally using image i.
• createLinearGradient(x1,y1,x2,y2) Creates a linear gradient starting at location x1,y1 and ending at x2,y2.
• createPattern(i,r) Creates a pattern from image i with the repeat value in r.
• createRadialGradient(x1,y1,r1,x2, y2,r2) Creates a radial gradient with a starting point of x1,y1 with radius of r1 and ending point of x2,y2 with radius of r2.
• drawImage(i,x,y,w,h) Places image i on the canvas at location x,y with a width and height of w and h (see also the following variation).
• drawImage(i,x1,y1,w1,h1,x2,y2,w2, h2) Places image i on the canvas at location x2,y2 with a width and height of w2 and h2, as well as a clipping from the original image at location x1,y1 with a width and height of w1 and h1.
• fill() Fills the area bounded by the current path.
• fillRect(x,y,w,h) Fills a rectangle whose top left is at x,y, with a width and height of w and h.
• fillText(t,x,y) Creates filled text using the text t with its top left at location x,y.
• getContext(v) Returns the drawing context (usually v has the value '2d').
• getImageData(x,y,w,h) Grabs a portion of the screen, starting at the top left position x,y with a width and height of w and h.
• isPointInPath(x,y) Tests whether the point at x,y is in the current path.
• lineTo(x,y) Creates a line from the current position to location x,y.
• moveTo(x,y) Moves the current path position to location x,y.
• putImageData(i,x,y) Inserts the image data i into the canvas with its top left at x,y.
• quadraticCurveTo(x1,y1,x2,y2) Creates a quadratic curve from the current location to x2,y2 with a control point at x1,y1.
• rect(x,y,w,h) Creates a rectangular path with top left at x,y and width and height of w and h.
• restore() Restores the current drawing context.
• rotate(r) Rotates an element by r radians (where a radian is 180/π).
• save() Saves the current drawing context.
• scale(h,v) Scales an element horizontally and vertically by factors of h and v.
• setTransform(m11,m12,m21,m22,x,y) Resets the current transform matrix and then multiplies it by the given values: m11 represents m1,1, m12 is m1,2, m21 is m2,1, m22 is m2,2, and x and y are delta x and y (see also transform()).
• stroke() Draws a path to the canvas.
• strokeRect(x,y,w,h) Draws a rectangle with top left at x,y and width and height of w and h.
• strokeText(t,x,y) Writes text t at location x,y.
• toDataURL() Converts the canvas to a data URL suitable for use in an <img> element.
• transform(m11,m12,m21,m22,x,y) Applies a transformation to the element using the values m11 for m1,1, m12 for m1,2, m21 for m2,1, m22 for m2,2, and x and y for delta x and y (see tinyurl.com/transmatrix for more on transformation matrices).
• translate(x,y) Moves the current origin to location x,y.

Attributes

• data[] An array holding the image data from a canvas.
• fillStyle Specifies the type of fill color to use (may be a CSS color value, a gradient object, or a pattern object).
• font Specifies the font to use (as a CSS font value).
• globalAlpha A floating point value that specifies the amount of transparency to use for drawing (between 0.00 and 1.00, inclusive).
• globalCompositeOperation Specifies the way compositing should happen (supported values are copy, darker, destination-atop, destinationin, destination-out, destination-over, lighter, source-atop, source-in, sourceout, source-over, and xor).
• height Specifies the height of an element (as a CSS value).
• length An integer value representing the number of pixel entries in an image.
• lineCap Specifies the way line ends should be capped (out of butt, round, and square).
• lineJoin Specifies how lines should be connected (out of bevel, miter, and round).
• lineWidth An integer value specifying the width of a line in pixels.
• miterLimit An integer value specifying the extent of a miter joint in pixels.
• shadowBlur The number of pixels over which to blur a shadow’s outline.
• shadowColor The base color to use for a shadow (as a CSS color).
• shadowOffsetX The horizontal offset in pixels by which the shadow should be shifted to the right (or left if negative).
• shadowOffsetY The vertical offset in pixels by which the shadow should be shifted down (or up if negative).
• strokeStyle ...