HTML5新特性有哪些，你都知道嗎
阿新 • • 發佈：2019-01-22
一、畫布（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>
點選看看效果:
