Canvas tutorial (2): HTML5 Canvas Overview

February 12, 2011
is a new HTML element, this element can be Script language (usually JavaScript) used to draw graphics. For example, you can use it to paint, synthetic images, or do simple (and not so simple) animations. Right image shows some application examples in this tutorial we will see them realized.
first in Apple (Apple) on the Mac OS X Dashboard was introduced, and after being used in Safari. Based on Gecko1.8 browser, such as Firefox 1.5, also support this new element. Element is WhatWG Web applications 1.0 is we all know the HTML 5 standard specification.
In this tutorial, I will try to describe how to use your own web page element. Provides a clear example should give you some idea, that what can be done with . These examples also serve as a starting point for your application .
Before you start with the elements
not difficult, as long as you have the basics of HTML and JavaScript.
As noted above, not all modern browsers support

elements, so you need Firefox 1.5 or later, or other Gecko-based browser such as Opera 9, or the latest version of Safari to see all the examples of the action.
1.Canvas that?
html5 Canvas can be found at the following complete definition of
http://www.whatwg.org/specs/web-apps/current-work/ # the-canvas < br />
now Firefox 2, safari directly support Canvas, IE needs a ExCanvas the js code base conversion.
The following can be found at ExCanvas [js libraries yet available for this arcto (), clip () support, so its based on a variety of natural components can not generate the chart pie chart]

http://excanvas.sourceforge.net/
Mozilla Canvas entry
http://developer.mozilla.org/en/docs/Category : HTML: Canvas
Mininova Canvas entry
http://labs.mininova.org/canvas/
2.Canvas can do ?
(1) Msx emulator
It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0.
Z80 and other hardware simulation with js, read rom information, silent game
http://jsmsxdemo. googlepages.com / jsmsx.html
(2) Painter
if performance permits, may also develop into a Web photo thing.
http://caimansys.com/painter/index.html
(3) the effect of water ripples

http://timelessname.com/canvas/experiment01/
visual model of a fuzzy theory
http://timelessname.com/canvas/experiment02/

(4) 3D
polyhedron
http://www.polyhedra.org/poly/
3D map
Mozilla example, RayCaster is a.
Canvascape – 3D walker, better than some of the above examples, it also provides texture mapping function
a similar CS interface
http:/ / www.abrahamjoffe.com.au/ben/canvascape/
(5) chart components
forming a WebFx Chart, Flot, etc., need to be on their own search.
3.Canvas development
(1) Canvas code into the flash (porting canvas to flash)
http://team.mixmedia .com / index.php? title = porting_c anvas_to_flash