(2) Enhanced form

　HTML5 has multiple new form Input input types. These new features provide better input control and validation.

　HTML5’s new form attribute

• • placehoder attribute, a short prompt will be displayed on the input field before the user enters the value. That is, our common default prompt of the input box disappears after the user inputs.
  • required attribute is a boolean attribute. The input field required to be filled in cannot be empty. The
  • pattern attribute describes a regular expression used to verify the value of the element.
  • min and max attributes, set the minimum and maximum value of the element.
  • step attribute specifies the legal number interval for the input field.
  • The height and width attributes are used for the image height and width of the tag of type image.
  • The autofocus attribute is a boolean attribute. Specifies that the field automatically gains focus when the page loads.
  • multiple attribute is a boolean attribute. Specifies that multiple values ??can be selected within the element.

(3) Video and audio

• HTML5 provides a standard for playing audio files , that is, use the control attribute of the

to add play, pause and volume controls.

Between you need to insert the prompt text of the

The

Currently, the

• 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)

(4)Canvas drawing

Labels are just graphics containers, and scripts must be used to draw graphics.

Canvas - 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), width and height attributes define the size of the canvas, 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 a variety of drawing paths, rectangles, circles, characters and additions Image method.

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).

Canvas - Path

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

moveTo(x,y) Define the starting coordinates of the line

lineTo(x,y) Define the ending coordinates of the line

To draw a line we must use the "ink" 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>

　　　　定義開始坐標(0,0), 和結束坐標 (200,100). 然后使用 stroke() 方法來繪制線條

Canvas - 文本

使用 canvas 繪制文本，重要的屬性和方法如下：

　　font - 定義字體

　　fillText(text,x,y) - 在 canvas 上繪制實心的文本

　　strokeText(text,x,y) - 在 canvas 上繪制空心的文本

使用 fillText():

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

　　使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）

Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

　　createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變

　　createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變

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

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){

},    //定位成功的回調function(err){

}        //定位失敗的回調)

(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>

更多編程相關知識，請訪問：編程學習??！