HTML5新特性總結
1、HTML5 中的一些有趣的新特性：javascript
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，好比 article、footer、header、nav、section
- 新的表單控件，好比 calendar、date、time、email、url、search
2、HTML5 視頻<video>html
一、視頻格式java
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件canvas
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件瀏覽器
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件ide
二、<video> 標籤的屬性函數
*標籤<source>規定多媒體資源，能夠是多個工具
三、實例ui
（1）編碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>視頻</title> 6 </head> 7 8 <body> 9 <video src="2. HTML5音頻視頻-編解碼工具.mp4" controls="controls" width="500px" height="500px"></video> 10 </body> 11 </html>
效果：
（2）HTML5 <video> - 使用 DOM 進行控制（用JS來控制視頻的播放/暫停以及放大、縮小）
<小知識：在JS函數裏輸入console.log("hello");表示在瀏覽器控制檯輸出hello，若控制檯能夠輸出hello，則表示函數是能夠調用的。>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>視頻</title>
6
7 </head>
8
9 <body>
10 <video id="video" src="2. HTML5音頻視頻-編解碼工具.mp4" width="300px" height="300px"></video>
11 <button onclick="clickA()">播放/暫停</button>
12 <button onclick="clickBig()">放大</button>
13 <button onclick="clickSmall()">縮小</button>
14
15 <script><!--若此JS部分寫在<head></head>中，視頻將播放錯誤-->
16 var a = document.getElementById("video");
17 function clickA() {
18 if(a.paused) a.play();
19 else a.pause();
20 }
21 function clickBig() {
22 a.width = 400;
23 a.height = 400;
24 }
25 function clickSmall() {
26 a.width = 150; <!--此處不能寫150px，不然會出錯,能夠寫成a.width = 400+"px";-->
27 a.height = 150;
28 }
29 </script>
30
31 </body>
32 </html>
效果：
點擊放大、縮小視頻會有相應的改變。
3、音頻<audio>
一、音頻格式
二、<audio>標籤屬性
control 屬性供添加播放、暫停和音量控件。<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的。（視頻中也是同樣）
4、HTML 5 Canvas（畫布）
一、什麼是Canvas?
canvas 元素用於在網頁上繪製圖形。
*HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像，canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成。
*畫布是一個矩形區域，您能夠控制其每一像素。
*canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
二、相關的JS知識：
（1）getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
（2）fillStyle 方法將其染色，fillRect 方法規定了形狀、位置和尺寸。【fillRect 方法擁有參數 (0,0,150,75)。意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)】
三、實例
（1）把鼠標懸停在矩形上能夠看到座標
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>畫布</title>
6 <script type="text/javascript">
7 function cnvs_getCoordinates(e)
8 {
9 x=e.clientX; <!--clientX 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（或客戶區）的水平座標-->
10 y=e.clientY;
11 document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
12 }
13
14 function cnvs_clearCoordinates()
15 {
16 document.getElementById("xycoordinates").innerHTML="";
17 }
18 </script>
19 </head>
20
21 <body style="margin:0px;">
22
23 <p>把鼠標懸停在下面的矩形上能夠看到座標：</p>
24
25 <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
26 onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
27 <br />
28 <br />
29 <br />
30 <div id="xycoordinates"></div>
31
32 </body>
33 </html>
知識點：
*clientX 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（或客戶區）的水平座標。客戶區指的是當前窗口。
*innerText和innerHTML均可以給標籤體裏添加相應信息。
效果：
（2）繪製線條
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>畫布</title>
6
7
8 </head>
9
10 <body>
11 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
12 Your browser does not support the canvas element.
13 </canvas>
14 <script type="text/javascript">
15 var c=document.getElementById("myCanvas");
16 var cxt=c.getContext("2d");
17 cxt.moveTo(10,10);
18 cxt.lineTo(150,50);
19 cxt.lineTo(10,50);
20 cxt.stroke();
21 </script>
22 </body>
23 </html>
知識點：
*moveto是移動到某個座標，lineto是從當前座標連線到某個座標。這兩個函數加起來就是畫一條直線。畫線要用「筆」，那麼MoveToEx()把筆要畫的起始位置固定了（x,y）而後要固定終止位置要用到LineTo函數肯定終止位置（xend,yend）,這樣一條線就畫出來了。每次與前面一個座標相連。
*stroke() 方法會實際地繪製出經過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
效果：
（3）繪製圓形
*fill() 方法填充當前的圖像（路徑）。默認顏色是黑色。
*arc() 方法建立弧/曲線（用於建立圓或部分圓）：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
* Cxt. beginPath() ：開啓路徑，開啓後能夠重新設置相關屬性 。 Cxt.closePath(）：關閉一條路徑。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>畫布</title>
6
7 </head>
8
9 <body>
10 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas> <!--不能放在JS代碼以後，不然效果出不來-->
11 <script type="text/javascript">
12 var c=document.getElementById("myCanvas");
13 var cxt=c.getContext("2d");
14 cxt.fillStyle="#FF0000";
15 cxt.beginPath();
16 cxt.arc(70,18,15,0,Math.PI*2,true);
17 cxt.closePath();
18 cxt.fill();
19 </script>
20
21 </body>
22 </html>
效果：
（4）顏色漸變
*createLinearGradient() 方法建立線性的漸變對象。漸變可用於填充矩形、圓形、線條、文本等等。使用 addColorStop() 方法規定不一樣的顏色，以及在 gradient 對象中的何處定位顏色。JS語法：context.createLinearGradient(x0,y0,x1,y1)：
*addColorStop() 方法規定 gradient 對象中的顏色和位置。JS語法：gradient.addColorStop(stop,color);
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>畫布</title>
6
7 </head>
8
9 <body>
10 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
11 <script type="text/javascript">
12 var c=document.getElementById("myCanvas");
13 var cxt=c.getContext("2d");
14 var grd=cxt.createLinearGradient(0,0,175,50);
15 grd.addColorStop(0,"#FF0000");
16 grd.addColorStop(1,"#00FF00");
17 cxt.fillStyle=grd;
18 cxt.fillRect(0,0,175,50);
19 </script>
20
21
22 </body>
23 </html>
效果：
（5）把一幅圖像放置到畫布上
*drawImage() 方法在畫布上繪製圖像、畫布或視頻。也可以繪製圖像的某些部分，以及/或者增長或減小圖像的尺寸。
*JS語法1：在畫布上定位圖像：context.drawImage(img,x,y);
*JS語法2：在畫布上定位圖像，並規定圖像的寬度和高度：context.drawImage(img,x,y,width,height);
*JS語法3：剪切圖像，並在畫布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>畫布</title>
6
7 </head>
8
9 <body>
10 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
11 <script type="text/javascript">
12 var c=document.getElementById("myCanvas");
13 var cxt=c.getContext("2d");
14 var img=new Image();
15 img.src="11.png";
16 cxt.drawImage(img,0,0);
17 </script>
18 </body>
19 </html>
- 1. HTML5新特性總結0804
- 2. html5新特性總結
- 3. HTML5新特性總結
- 4. HTML5新特性總結（一）-新標籤
- 5. html5,css3,es6新特性總結
- 6. HTML5 新特性小結
- 7. HTML5 新特性
- 8. HTML5新特性
- 9. Html5新特性
- 10. HTML5 新特性
- 更多相關文章...
- • PHP 7 新特性 - PHP教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • JDK13 GA發佈：5大特性解讀
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML5新特性總結0804
- 2. html5新特性總結
- 3. HTML5新特性總結
- 4. HTML5新特性總結（一）-新標籤
- 5. html5,css3,es6新特性總結
- 6. HTML5 新特性小結
- 7. HTML5 新特性
- 8. HTML5新特性
- 9. Html5新特性
- 10. HTML5 新特性