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 应用程序，可以运行在现有的任何浏览器上；
hello world 例子[IE9中通过测试]
View Code
<!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>
愿喜欢我的人、不喜欢我的人都得到幸福！
南无阿弥陀佛！
