##HTML5 specifies a standard way to include video through the video element.

• <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  您的瀏覽器不支持Video標簽。
  </video>

control provides play, pause and volume controls to control the video. You can also use DOM operations to control the playback and pause of the video, such as the play() and pause() methods.

At the same time, the video element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page is loaded. If these properties are not set and the browser does not know the size of the video, the browser will not be able to reserve a specific space when loading, and the page will change based on the size of the original video. The content inserted between the

and tags is provided for display by browsers that do not support the video element.

The video element supports multiple source elements. Elements can link different video files. The browser will use the first recognized format (MP4, WebM, and Ogg)

Tags are just graphics containers and must be used with scripts to draw graphics.

1. Create a canvas. A canvas is a rectangular box in a web page, drawn through the element. By default elements have no borders and no content.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Tags usually need to specify an id attribute (often referenced in scripts), the size of the canvas defined by the width and height attributes, and use the style attribute to add a border. You can use multiple elements in an HTML page

2. Use Javascript to draw images. The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript

<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>

The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default fillStyle setting is #000000 (black). The fillRect(x,y,width,height) method defines the current filling method of the rectangle. Meaning: Draw a 150x75 rectangle on the canvas, starting from the top left corner (0,0).

To draw a line on the Canvas, we will use the following two methods:

moveTo(x ,y) Define the start coordinate of the line
lineTo(x,y) Define the end coordinate of the line
We must use "ink" to draw the line method, just like stroke().

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

Define the start coordinate (0,0), and the end coordinate (200,100). Then use the stroke() method to draw the line

Use canvas to draw text. The important properties and methods are as follows:

font - define font

• ##fillText(text,x,y ) - Draw solid text on canvas

• ##strokeText(text,x,y) - Draw hollow text on canvas

• Use fillText():

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.font="30px Arial";
  ctx.fillText("Hello World",10,50);

Use "Arial" font to draw a 30px high text (solid) on the canvas

Gradient You can fill rectangles, circles, lines, text, etc., and you can define different colors for various shapes. There are two different ways to set the Canvas gradient:

createLinearGradient(x,y,x1,y1) - Create a line gradient

• createRadialGradient(x,y,r,x1,y1,r1) - Create a radial/circular gradient

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數(shù)使用坐標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值為漸變，然后繪制形狀，如矩形，文本，或一條線。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

　　創(chuàng)建了一個線性漸變，使用漸變填充矩形

Canvas - 圖像

　　把一幅圖像放置到畫布上, 使用 drawImage(image,x,y) 方法

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

　　把一幅圖像放置到了畫布上

(5)SVG繪圖

　　SVG是指可伸縮的矢量圖形

SVG 與 Canvas兩者間的區(qū)別

　　SVG 是一種使用 XML 描述 2D 圖形的語言。

　　Canvas 通過 JavaScript 來繪制 2D 圖形。

　　SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

　　在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。

　　Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

(6)地理定位

　　HTML5 Geolocation（地理定位）用于定位用戶的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于獲取當前的位置數(shù)據(jù)
    watchPosition: fn  監(jiān)視用戶位置的改變
    clearWatch: fn  清除定位監(jiān)視
}　

　　獲取用戶定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用戶定位數(shù)據(jù)獲取成功')
　　　　//console.log(arguments);
　　　　console.log('定位時間：',pos.timestamp)
　　　　console.log('經度：',pos.coords.longitude)
　　　　console.log('緯度：',pos.coords.latitude)
　　　　console.log('海拔：',pos.coords.altitude)
　　　　console.log('速度：',pos.coords.speed)

},    //定位成功的回調
function(err){ 
　　　　console.log('用戶定位數(shù)據(jù)獲取失敗')
　　　　//console.log(arguments);

}        //定位失敗的回調
)

(7)拖放API

　　拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

　　拖放的過程分為源對象和目標對象。源對象是指你即將拖動元素，而目標對象則是指拖動之后要放置的目標位置。

拖放的源對象(可能發(fā)生移動的)可以觸發(fā)的事件——3個：

• dragstart：拖動開始

• drag：拖動中

• dragend：拖動結束

整個拖動過程的組成： dragstart*1 + drag*n + dragend*1

拖放的目標對象(不會發(fā)生移動)可以觸發(fā)的事件——4個：

• dragenter：拖動著進入

• dragover：拖動著懸停

• dragleave：拖動著離開

• drop：釋放

整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1

整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1

• dataTransfer：用于數(shù)據(jù)傳遞的“拖拉機”對象；

在拖動源對象事件中使用e.dataTransfer屬性保存數(shù)據(jù)：

e.dataTransfer.setData( k,  v )

在拖動目標對象事件中使用e.dataTransfer屬性讀取數(shù)據(jù)：

var value = e.dataTransfer.getData( k )

(8)Web Worker

　　當在 HTML 頁面中執(zhí)行腳本時，頁面的狀態(tài)是不可響應的，直到腳本已完成。

　　web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行。

　　首先檢測瀏覽器是否支持 Web Worker

 if(typeof(Worker)!=="undefined"){
   // 是的! Web worker 支持!
   // 一些代碼.....
   }else{
   // //抱歉! Web Worker 不支持
   }

　　下面的代碼檢測是否存在 worker，如果不存在，- 它會創(chuàng)建一個新的 web worker 對象，然后運行 "demo_workers.js" 中的代碼

 if(typeof(w)=="undefined")
   {
   w=new Worker("demo_workers.js");
   }

　　然后我們就可以從 web worker 發(fā)送和接收消息了。向 web worker 添加一個 "onmessage" 事件監(jiān)聽器：

 w.onmessage=function(event){
 document.getElementById("result").innerHTML=event.data;
 };

　　當 web worker 傳遞消息時，會執(zhí)行事件監(jiān)聽器中的代碼。event.data 中存有來自 event.data 的數(shù)據(jù)。當我們創(chuàng)建 web worker 對象后，它會繼續(xù)監(jiān)聽消息（即使在外部腳本完成之后）直到其被終止為止。

如需終止 web worker，并釋放瀏覽器/計算機資源，使用 terminate() 方法。

完整的 Web Worker 實例代碼

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>var w;function startWorker()
{if(typeof(Worker)!=="undefined")
{  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}function stopWorker()
{ 
w.terminate();
}</script>

</body>
</html>

　　創(chuàng)建的計數(shù)腳本，該腳本存儲于 "demo_workers.js" 文件中

var i=0;

 function timedCount()
 {
 i=i+1;
 postMessage(i);
 setTimeout("timedCount()",500);
 }

 timedCount();

(9)Web Storage

　　使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。早些時候,本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

客戶端存儲數(shù)據(jù)的兩個對象為：

• localStorage - 沒有時間限制的數(shù)據(jù)存儲

• sessionStorage - 針對一個 session 的數(shù)據(jù)存儲, 當用戶關閉瀏覽器窗口后，數(shù)據(jù)會被刪除。

　　在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {
   // 是的! 支持 localStorage  sessionStorage 對象!
   // 一些代碼.....
   }
 else
   {
   // 抱歉! 不支持 web 存儲。
   }

　　不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

• 保存數(shù)據(jù)：localStorage.setItem(key,value);
• 讀取數(shù)據(jù)：localStorage.getItem(key);
• 刪除單個數(shù)據(jù)：localStorage.removeItem(key);
• 刪除所有數(shù)據(jù)：localStorage.clear();
• 得到某個索引的key：localStorage.key(index);

(10)WebSocket

　　WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。瀏覽器通過 JavaScript 向服務器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數(shù)據(jù)。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務器返回的數(shù)據(jù)。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的瀏覽器支持 WebSocket!");
               
               // 打開一個 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
                  ws.send("發(fā)送數(shù)據(jù)");
                  alert("數(shù)據(jù)發(fā)送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("數(shù)據(jù)已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 關閉 websocket
                  alert("連接已關閉..."); 
               };
            }
            
            else
            {
               // 瀏覽器不支持 WebSocket
               alert("您的瀏覽器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">運行 WebSocket</a>
      </div>
      
   </body>
</html>

推薦教程：《html視頻教程》

The above is the detailed content of What are the features of html5. For more information, please follow other related articles on the PHP Chinese website!