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