一、畫布（Canvas)
畫布是網頁中的一塊區域，可所以用JavaScript在上面繪圖。下面我們來創建一個畫布並在上面繪制一個坦克（后面將用HTML5做一個坦克大戰游戲），代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <h1>html5-坦克大戰</h1> <!--坦克大戰的戰場--> <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> <script type="text/javascript"> //得到畫布 var canvas1 = document.getElementById("tankMap"); //定義一個位置變量 var heroX = 80; var heroY = 80; //得到繪圖上下文 var cxt = canvas1.getContext("2d"); //設置顏色 cxt.fillStyle="#BA9658"; //左邊的矩形 cxt.fillRect(heroX,heroY,5,30); //右邊的矩形 cxt.fillRect(heroX+17,heroY,5,30); //畫中間的矩形 cxt.fillRect(heroX+6,heroY+5,10,20); //畫出坦克的蓋子 cxt.fillStyle="#FEF26E"; cxt.arc(heroX+11,heroY+15,5,0,360,true); cxt.fill(); //畫出炮筒 cxt.strokeStyle="#FEF26E"; cxt.lineWidth=1.5; cxt.beginPath(); cxt.moveTo(heroX+11,heroY+15); cxt.lineTo(heroX+11,heroY); cxt.closePath(); cxt.stroke(); </script> </body> </html>
運行效果如下：
2、地址位置
Html5的地理位置特性可以返回網頁訪問者的地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第八基地菜鳥教程(noob.d8jd.com)</title> </head> <body> <p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲取）：</p> <button onclick="getLocation()">點我</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="該瀏覽器不支持獲取地理位置。"; } } function showPosition(position) { x.innerHTML="緯度: " + position.coords.latitude + "<br>經度: " + position.coords.longitude; } </script> </body> </html>
點擊運行，看看效果吧
3、豐富強大的表單
HTML5提供了表單增強特性，這些功能是由復雜的JavaScript編寫的，以便能在所有瀏覽器上工作.
4、本地存儲
HTML5本地存儲類似於cookies，但它支持存儲的數據量更大，並且提供了一個本地數據庫引擎，從而使保持和獲取數據更加容易。這個特點可以很好的將數據分發給用戶緩解與服務器的連接壓力。另外可以使用JavaScript從本地Web頁面中訪問本地數據庫，這意味着你可以將網頁保存到你本地從公司回到家里不用連接互聯網就能打開。
5、媒體
HTML5規范中最具亮點的部分也許就是HTML5瀏覽器內置的多媒體播放功能，不需要Flash、Microsoft Media Player等插件。
<!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls"> your browser does not support the video tag </video> </body> </html>
運行效果如下：
6、語音搜素功能：
大家現在可以在好多網站上看到語音搜素功能，HTML5提供了強大的語音搜素功能屬性，只需要添加一個屬性就可以實現。
注意：x-webkit-speech是webkit內核瀏覽器的私有屬性(廢話)。但現在只能在google的chrome 11以上才能使用。
實現過程大概是捕捉到語音后，數據發送到google的服務器進行語音識別，然后返回結果。所以沒有足夠強大大的研發能力和服務器資源，真沒法支持這個服務。
作為普通話不標准經常被別人吐槽的人，使用語音搜索還是能十分准確地返回關鍵詞，我頓時感動得一塌糊塗。
<!DOCTYPE html> <head> <meta charset="utf-8"/> </head> <body> <h1>語音搜素功能</h1> <input type="text" name="yuyin" id="yuyin" x-webkit-speech/> </body>
點擊看看效果:
