HTML5 Canvas 初吻
html5
html5是当前最新的html（HyperText Markup Language）版本，
在1993年，html被标准化也是推动www发展的重要因素， html是一种使用标签（<>）定义web页面内容的方式。
html5 canvas
简单的理解，<canvas>是一个新的HTML元素(标签)，我们可以在<canvas></canvas>定义区域， 该区域可理解成一个画布； 利用canvas api在这个画布上进行绘图；
是可用javascript操作直接在屏幕可绘图区域绘图；
canvas直接通过屏幕像素渲染；
可以javascript与canvas api 重绘可绘图屏幕的每一帧；
作为一个programmer,只需要确保用正确的像素渲染每一帧图像，并显示出来即可；
canvas api
包括一个2D环境，2D环境是一个显示api，用于在一个可绘图区域渲染图像；
允许programmer绘各种形状、文本、直接显示图片；
可以控制颜色、旋转、透明度、像素操作；以及各种直线、曲线、盒子等；
但在2D环境下，用这个技术创建应用程序，是非常little,只需添加兼容javascript跨浏览器的功能，支持键盘、鼠标、时间、事件、对象、声音等；
我们可以通过学习html5 canvas,创建惊人的动画、应用程序及游戏（基本上取代了flash等）；
DOM and Canvas
DOM= Document Object Model， 表示和处理一个html页面；
一种独立于平台和语言，可在浏览器中访问和修改一个文档的内容和结构;
为了可以用javascript来操作canvas,在html5页面中，用DOM来定位<canvas>标签;
canvas元素本身是可以在浏览器中通过 DOM来访问的，但在画布上创建的单个图形元素是在DOM中访问 这是因为画布在实时模式下工作，没有自己的对象；
"window"对象是最顶级的DOM对象、我们需要测试该对象，以确保我们启动canvas应用程序之前，所有的代码已加载；
"document"对象包含一个html页面的所有html标签。我们将需要它来查找到要用javascript操作的canvas实例；
JavaScript and Canvas
我们可以用javascript来创建canvas 应用程序，可以运行在现有的任何浏览器上；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Your First Canvas Application </title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> //modernizr-1.6.min.js 是一个支持canvas的类库，大家自己下载一下 //监听页面加载事件 window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded () {canvasApp();} //检查是否支持 canvasfunction canvasSupport () {return Modernizr.canvas;} //canvas 程序 function canvasApp () {if (!canvasSupport()) {return;} var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); //绘图主程序 function drawScreen() { //background context.fillStyle = "#ffffaa"; context.fillRect(0, 0, 500, 300); //text context.fillStyle = "#000000"; context.font = "20px _sans"; context.textBaseline = "top"; context.fillText ("Hello World!", 195, 80 ); //box context.strokeStyle = "#000000"; context.strokeRect(5, 5, 490, 290);} //调用绘图 drawScreen(); </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="300">Your browser does not support HTML5 Canvas.</canvas> </div> </body> </html>转自：http://www.cnblogs.com/amtf/archive/2012/01/04/2307382.html
openkk 
ajax 
jopen