在此之前，建議安裝最新版火狐瀏覽器或者Chrome，編輯器我使用的是Dreamweaver，當然，記事本也可以，只要滿足這些條件，那么，一切都已經准好了，我們可以開始神奇的html5之旅了！
首先，我們建立一個基本的html5頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title></head>
<body>
<canvas id="scene" width="800" height="600"></canvas>
</body>
</html>
對比XHTML，它的頭部申明變短了，不需要加入那長長的一串URL地址了，而且meta標簽的申明也簡化了！這 里我們就建立了一個基本的html5頁面，使用UTF-8編碼！而且我們還使用了一個canvas標簽！html5通過canvas提供了相關圖形處理接口，我們通過它就可以處理各種各樣的圖形了，在canvas中我們可以繪制各種圖形，比如矩形，圓行，直線，曲線等，同時出可以繪制各種現有圖片！
下面的例子，我將在canvas(下稱為畫布)上繪制一張小圖片(精靈)（在這里，我假定大家已經知道了幀與Sprite(精靈)的概念！如果對這兩個概念不了解的自行查詢）！
var ctx = document.getElementById("scene").getContext("2d");
var img = new Image();
img.onload=function(){
ctx.drawImage(img,0,0,75,70,0,0,75,70);
}
img.src="dragon.gif";
顯示結果：
我們成功在畫布上畫出一個精靈，第一行通行getContext("2d")獲得了一個CanvasRenderingContext2D對象，然后創建了一個Image對象，並在Image加載完成的事件中，使用drawImage方法將我們的精靈繪制到了畫布上！
看起來很簡單，好像也沒有什么激動人心的，是的，只是一張小小的圖片，不過一切復雜的事物不都是加簡單的東西組成的嗎？我們先來看一下drawImage方法的相關參數：
drawImage有多個參數的重載！最多為九個，下面以以九個參數為例解釋下各個參數的作用：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
| 參數 |
參數 |
說明 |
| 參數1 |
image |
圖片 |
| 參數2 |
sx |
圖片裁剪的X位置 |
| 參數3 |
sy |
圖片裁剪的Y位置 |
| 參數4 |
sw |
裁剪的寬度 |
| 參數5 |
sh |
裁剪的高度 |
| 參數6 |
dx |
畫布的X位置 |
| 參數7 |
dy |
畫布的Y位置 |
| 參數8 |
dw |
繪制到畫布上的寬 |
| 參數9 |
dh |
繪制到畫布上的高 |
所有方法如下：
void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
利用CanvasRenderingContext2D對象還可以進行像素級的操作，這個我將會在后期講到，目前只要利用drawImage方法就可以做出很多有趣的東西來了！
下面我們來做一個會動的精靈！其實每個動畫，都是由一張一張的圖片（幀）快速切換而得到的！下面，我們將利用這個原理，每隔一定時間，從下面的圖片上截取一張小圖片繪制到畫布上，形成動畫，讓小紅龍扇動翅膀！
首先要用到一張大圖：
代碼：
var ctx = document.getElementById("scene").getContext("2d");
var img = new Image();
var x =0;
img.onload=function(){
setInterval(function(){
if(x>=9){
x=0;
}else{
x++;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img,x * 75,0,75,70,n,0,75,70);
},50)
}
img.src="1.jpg";
在這里，使用了定時器，每隔50毫秒（注意，這個不一定是准確數字）就會在圖片截取一張75 * 70像素大小的小圖並繪制出來，且每次向右移75像素，直到到最右端時重新從0開始，不停循環！小紅龍就開始不停扇動翅膀了！
動態圖就不放出來了，大家可以下載下面的文檔直接在本地演示！
今天本文暫時就到這里，下一節演示如何讓小紅龍開始飛行，與碰撞檢測。並附上一個小特效！
下載地址：http://files.cnblogs.com/hnvvv/html5_Game_L1.rar
目錄：http://www.cnblogs.com/hnvvv/archive/2012/01/09/2317336.html
第一次寫這樣的東西，發現挺累的！Orz...
1月12日補充：回頭看了看前兩天寫的這篇文章，突然發現其實這些內容在網上都可以找得到，於是猶豫了，好吧，我承認我有點虎頭蛇尾，我在想這樣的內容有沒有必要繼續寫下去,我的大致打算是這樣的，第一部分寫一下HTML5的基本知識，第二部分封裝部分代碼，實現可重利用，第三部分，處理地圖，效果，與刷怪等內容。但是我現在有點猶豫，要不要繼續寫下去呢？新來的朋友給點意見吧！