html5的內容 - 台部落

attribute和property

1.什麼是attribute，什麼是property
html標籤的預定義和自定義屬性我們統稱爲attribute
js原生對象的直接屬性，我們統稱爲property
2.什麼是布爾值屬性，什麼是非布爾值屬性
property的屬性值爲布爾類型的我們統稱爲布爾值屬性
property的屬性值爲非布爾類型的我們統稱爲非布爾值屬性
3.attribute和property的同步關係
非布爾值屬性：實時同步
布爾值屬性：
property永遠都不會同步attribute
在沒有動過property的情況下
attribute會同步property
在動過property的情況下
attribute不會同步property
4.用戶操作的是property
5.瀏覽器認的是property

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" checked="checked"  name="qhf"/>
	</body>
	<script type="text/javascript">
		var qhf = document.querySelector("input[type=checkbox]");
		
		debugger
		qhf.setAttribute("name","qhf1")
		qhf.setAttribute("name","qhf2")
		qhf.setAttribute("name","qhf3")
		
		qhf.name="qhf4";
		qhf.name="qhf5";
		qhf.name="qhf6";
		
		qhf.setAttribute("name","qhf7")
		qhf.setAttribute("name","qhf8")
		qhf.setAttribute("name","qhf9")
	</script>
</html>

className和classList

我們操作類的時候，通過className得到是一個字符串，對於添加、刪除類的時候，還需要使用正則表達式，都極爲不方便。如下代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				height: 300px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//獲取box
				var box = document.getElementById("box");
				//獲取btn01
				var btn01 = document.getElementById("btn01");
				
				//爲btn01綁定單擊響應函數
				btn01.onclick = function(){
					//修改box的樣式
					/*
					 * 通過style屬性來修改元素的樣式，每修改一個樣式，瀏覽器就需要重新渲染一次頁面
					 * 	這樣的執行的性能是比較差的，而且這種形式當我們要修改多個樣式時，也不太方便
					 */
					/*box.style.width = "200px";
					box.style.height = "200px";
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 我希望一行代碼，可以同時修改多個樣式
					 */
					
					//修改box的class屬性
					/*
					 * 我們可以通過修改元素的class屬性來間接的修改樣式
					 * 這樣一來，我們只需要修改一次，即可同時修改多個樣式，
					 * 	瀏覽器只需要重新渲染頁面一次，性能比較好，
					 * 	並且這種方式，可以使表現和行爲進一步的分離
					 */
					//box.className += " b2";
					//addClass(box,"b2");
					
					//alert(hasClass(box,"hello"));
					
					//removeClass(box,"b2");
					
					toggleClass(box,"b2");
				};
				
			};
			
			//定義一個函數，用來向一個元素中添加指定的class屬性值
			/*
			 * 參數:
			 * 	obj 要添加class屬性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//檢查obj中是否含有cn
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}
			
			/*
			 * 判斷一個元素中是否含有指定的class屬性值
			 * 	如果有該class，則返回true，沒有則返回false
			 * 	
			 */
			function hasClass(obj , cn){
				
				//判斷obj中有沒有cn class
				//創建一個正則表達式
				//var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
				
			}
			
			/*
			 * 刪除一個元素中的指定的class屬性
			 */
			function removeClass(obj , cn){
				//創建一個正則表達式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//刪除class
				obj.className = obj.className.replace(reg , "");
				
			}
			
			/*
			 * toggleClass可以用來切換一個類
			 * 	如果元素中具有該類，則刪除
			 * 	如果元素中沒有該類，則添加
			 */
			function toggleClass(obj , cn){
				
				//判斷obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，則刪除
					removeClass(obj , cn);
				}else{
					//沒有，則添加
					addClass(obj , cn);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點擊按鈕以後修改box的樣式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>

如上代碼，使用className添加類的時候，是很不方便的。

所以產生了calssList便於我們對類的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" class="qhf qhf1 qhf2 qhf3">
			
		</div>
	</body>
	<script type="text/javascript">
		var testNode = document.querySelector("#test");
		console.log(testNode.className) //"qhf qhf1 qhf2 qhf3"
		testNode.classList.add("qhf4");
		testNode.classList.remove("qhf1");
		testNode.classList.toggle("qhf2");
		console.log(testNode.classList);//["qhf", "qhf3", "qhf4", value: "qhf qhf3 qhf4"]
	</script>
</html>

自定義屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" data-atguigu-qhf="qhf">
			
		</div>
	</body>
	<script type="text/javascript">
		var testNode = document.querySelector("#test");
		console.log(testNode.dataset.atguiguQhf); //必須是駝峯命名法
		testNode.dataset.atguiguQhf="111"; //可以修改
		testNode.dataset.atguiguQhf.add("222");//不能修改
	</script>
</html>

可編輯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				background: pink;
			}	
		</style>
	</head>
	<body>
		<div id="test" contenteditable="true">
			djhaldhaskj
		</div>
	</body>
</html>

canvas

基本用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
			}
		}
	</script>
</html>

<canvas>很容易定義一些替代內容，由於某些較老的瀏覽器（尤其是IE9之前的瀏覽器）不支持html元素canvas

但是這些瀏覽器上你應該要給用戶暫時替代內容

這非常簡單：我們只需要在<canvas>標籤中提供替換內容就可以了

-----> 支持canvas的瀏覽器將會忽略在容器中包含的內容，並且只是正常的渲染canvas

-----> 不支持canvas的瀏覽器會會顯示替代內容

canvas標籤的兩個屬性：

canvas看起來和img元素很相像，唯一的不同就是它沒有src和alt屬性。實

際上，canvas標籤只有兩個屬性——width和height。這些都是可選的

當沒有設置寬度和高度的時候，canvas會初始化寬度爲300像素和高度爲150像素。

畫布的高寬（今後再講）

html屬性設置width height時隻影響畫布本身不影畫布內容
css屬性設置width height時不但會影響畫布本身的高寬，還會使畫布中的內容等比例縮放（縮放參照於畫布默認的尺寸）

渲染上下文

canvas元素只是創造了一個固定大小的畫布，要想在它上面去繪製內容，

我們需要找到它的渲染上下文

canvas元素有一個叫做 getContext() 的方法，這個方法是用來獲得渲染上下文

（獲取畫筆）和它的繪畫功能。getContext()只有一個參數，上下文的格式

----->獲取方式
var canvas = document.getElementById(‘box’);
var ctx = canvas.getContext(‘2d’);

----->檢查支持性
var canvas = document.getElementById(‘tutorial’);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
}

繪製矩形

HTML中的元素canvas只支持一種原生的圖形繪製：矩形。所有其他的圖形的繪製都至少需要生成一條路徑

1.繪製矩形

canvas提供了三種方法繪製矩形：

---->繪製一個填充的矩形（填充色默認爲黑色）

fillRect(x, y, width, height)

---->繪製一個矩形的邊框（默認邊框爲:一像素實心黑色）

strokeRect(x, y, width, height)

---->清除指定矩形區域，讓清除部分完全透明。

clearRect(x, y, width, height)

x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。

width和height設置矩形的尺寸。（存在邊框的話，邊框會在width上佔據一個邊框的寬度，height同理）

2.strokeRect時，邊框像素渲染問題

按理渲染出的邊框應該是1px的，canvas在渲染矩形邊框時，邊框寬度是平均分在偏移位置的兩側。
context.strokeRect(10,10,50,50):邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓一個像素只用自己的一半的

相當於邊框會渲染在9到11之間

context.strokeRect(10.5,10.5,50,50):邊框會渲染在10到11之間

3.添加樣式和顏色

illStyle :設置圖形的填充顏色。

strokeStyle :設置圖形輪廓的顏色。默認情況下，線條和填充顏色都是黑色（CSS 顏色值 #000000）

lineWidth : 這個屬性設置當前繪線的粗細。屬性值必須爲正數。描述線段寬度的數字。 0、負數、 Infinity和

NaN 會被忽略。默認值是1.0。

ctx.globalAlpha：設置顏色的透明度，數值在0到1之間

這些樣式要在畫布畫上去之前，就要設置好，都是按照順序畫出來的

4.lineWidth & 覆蓋渲染

ctx.lineWidth = 5

ctx.clearRect(x, y, width, height)

5.lineJoin
設定線條與線條間接合處的樣式（默認是 miter）
round : 圓角
bevel : 斜角
miter : 直角

注意：canvas是同步的思想，所見即所得

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				//注意不加單位
				//填充的矩形
				ctx.fillRect(0,0,100,100)
				//帶邊框的矩形  
				// 100	: 99.5 --- 100.5(99-101)
				// 100.5: 100  --- 101 
				ctx.strokeRect(100.5,100.5,100,100)
			}
		}
		
		
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				//注意不加單位
				//填充的矩形
				ctx.fillRect(0,0,100,100)
				//帶邊框的矩形  
				// 100	: 99.5 --- 100.5(99-101)
				// 100.5: 100  --- 101 
				ctx.strokeRect(100.5,100.5,100,100)
			}
		}
		
		
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				//注意不加單位
				//填充的矩形
				ctx.fillRect(0,0,100,100)
				//帶邊框的矩形  
				// 100	: 99.5 --- 100.5(99-101)
				// 100.5: 100  --- 101 
				ctx.strokeRect(100.5,100.5,100,100)
			}
		}	
	</script>
</html>

繪製路徑

圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。

步驟：

1.首先，你需要創建路徑起始點。

2.然後你使用畫圖命令去畫出路徑

3.之後你把路徑封閉。

4.一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。

繪製三角形

beginPath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上準備生成路徑。
生成路徑的第一步叫做beginPath()。本質上，路徑是由很多子路徑構成，這些子路徑都是在一個列表中，所有的子路徑（線、弧形、等等）構成圖形。而每次這個方法調用之後，列表清空重置，然後我們就可以重新繪製新的圖形。

moveTo(x, y)
將筆觸移動到指定的座標x以及y上
當canvas初始化或者beginPath()調用後，你通常會使用moveTo()函數設置起點

lineTo(x, y)
將筆觸移動到指定的座標x以及y上
繪製一條從當前位置到指定x以及y位置的直線。

closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
閉合路徑closePath()，不是必需的。這個方法會通過繪製一條從當前點到開始點的直線來閉合圖形。
如果圖形是已經閉合了的，即當前點爲開始點，該函數什麼也不做
當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath()函數。但是調用stroke()時不會自動閉合

stroke()
通過線條來繪製圖形輪廓。不會自動調用closePath()

fill()
通過填充路徑的內容區域生成實心的圖形。自動調用closePath()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.strokeStyle="deeppink";
				ctx.fillStyle="green"
				ctx.lineWidth=4;
				
				ctx.moveTo(100,100);
				ctx.lineTo(100,200);
				ctx.lineTo(200,200);
				ctx.closePath();
				ctx.fill();
				
				
				//清空路徑容器
				ctx.beginPath();
				ctx.moveTo(200,200);
				ctx.lineTo(200,300);
				ctx.lineTo(300,300);
				ctx.closePath();
				ctx.stroke();
				
			}
		}	
	</script>
</html>

繪製矩形

rect(x, y, width, height)

繪製一個左上角座標爲（x,y），寬高爲width以及height的矩形，當該方法執行的時候，moveTo()方法自動設置座標參數（0,0），也就是說，當前筆觸自動重置會默認坐

lineCap
lineCap 是 Canvas 2D API 指定如何繪製每一條線段末端的屬性。
有3個可能的值，分別是：
butt :線段末端以方形結束。
round :線段末端以圓形結束
square:線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域
默認值是 butt。

save
save() 是 Canvas 2D API 通過將當前狀態放入棧中，保存 canvas 全部狀態的方法
保存到棧中的繪製狀態有下面部分組成：
當前的變換矩陣。
當前的剪切區域。
當前的虛線列表.
以下屬性當前的值：

strokeStyle,
fillStyle,
lineWidth,
lineCap,
lineJoin…

restore
restore() 是 Canvas 2D API 通過在繪圖狀態棧中彈出頂端的狀態，將 canvas 恢復到最近的保存狀態的方法。
如果沒有保存狀態，此方法不做任何改變。

基本模板

所以在開發中，我們整理出一套canvas模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			/*
			1.路徑容器
				每次調用路徑api時,都會往路徑容器裏做登記
				調用beginPath時,清空整個路徑容器
			2.樣式容器
				每次調用樣式api時,都會往樣式容器裏做登記
				調用save時候,將樣式容器裏的狀態壓入樣式棧
				調用restor時候,將樣式棧的棧頂狀態彈出到樣式樣式容器裏,進行覆蓋
			3.樣式棧
				調用save時候,將樣式容器裏的狀態壓入樣式棧
				調用restor時候,將樣式棧的棧頂狀態彈出到樣式樣式容器裏,進行覆蓋
			*/
			
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.save();
				//關於樣式的設置
				//save  restore成對出現
				ctx.beginPath();
				//關於路徑
				ctx.restore();
					
				ctx.save();
				//關於樣式的設置
				ctx.beginPath();
				//關於路徑
				
				ctx.fill();
				ctx.restore();
			}
		}	
	</script>
</html>

繪製曲線

角度與弧度的js表達式:radians=(Math.PI/180)*degrees

canvas繪製圓形

arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，
按照anticlockwise給定的方向（默認爲順時針）來生成。
ture：逆時針
false:順時針
x,y爲繪製圓弧所在圓上的圓心座標
radius爲半徑
startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。這些都是以x軸爲基準
參數anticlockwise 爲一個布爾值。爲true時，是逆時針方向，否則順時針方向。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.arc(100,100,50,0,90*Math.PI/180,true);
				ctx.closePath();
				ctx.stroke();
			}
		}
	</script>
</html>

arcTo

arcTo(x1, y1, x2, y2, radius)

根據給定的控制點和半徑畫一段圓弧

肯定會從(x1 y1) 但不一定經過(x2 y2);(x2 y2)只是控制一個方向

起始點爲moveto時指定的點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(200,200);
				ctx.stroke();
				
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.arcTo(300,0,200,200,50);
				ctx.stroke();
			}
		}	
	</script>
</html>

貝塞爾

二次貝塞爾
quadraticCurveTo(cp1x, cp1y, x, y)
繪製二次貝塞爾曲線，cp1x,cp1y爲一個控制點，x,y爲結束點。
起始點爲moveto時指定的點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(200,200);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.quadraticCurveTo(300,0,200,200);
				ctx.stroke();
			}
		}
	</script>
</html>

三次貝塞爾
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪製三次貝塞爾曲線，cp1x,cp1y爲控制點一，cp2x,cp2y爲控制點二，x,y爲結束點。
起始點爲moveto時指定的點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(0,300);
				ctx.lineTo(300,300);
				ctx.stroke();
					
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.bezierCurveTo(300,0,0,300,300,300);
				ctx.stroke();
			}
		}	
	</script>
</html>

canvas變換

translate(x, y)

我們先介紹 translate 方法，它用來移動 canvas的原點到一個不同的位置

translate 方法接受兩個參數。x 是左右偏移量，y 是上下偏移量

canvas中translate是累加的

rotate(angle)

這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度爲單位的值。

旋轉的中心點始終是 canvas 的原點，如果要改變它，我們需要用到 translate 方法

在canvas中rotate是累加的

scale(x, y)

scale 方法接受兩個參數。x,y 分別是橫軸和縱軸的縮放因子，它們都必須是正值。

值比 1.0 小表示縮小，比 1.0 大則表示放大，值爲 1.0 時什麼效果都沒有。

縮放一般我們用它來增減圖形在 canvas 中的像素數目，對形狀，位圖進行縮小或者放大。

在canvas中scale是累乘的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.scale(2,2)
				/*
				css像素是一個抽象單位
					放大:
						使畫布內css像素的個數變少，單個css像素所佔據的實際物理尺寸變大
					縮小:
						使畫布內css像素的個數變多，單個css像素所佔據的實際物理尺寸變小
				* */		
				ctx.beginPath();
				ctx.fillRect(50,50,100,100);
			}
		}
	</script>
</html>

使用圖片&設置背景

在canvas中插入圖片(需要image對象)

1.canvas操作圖片時，必須要等圖片加載完才能操作

2.drawImage(image, x, y, width, height)

其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標 canvas 裏的起始座標。

這個方法多了2個參數：width 和 height，這兩個參數用來控制當像canvas畫入時應該縮放的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				var img = new Image();
				img.src="tg.png";
				img.onload=function(){
					draw();
				}
				
				function draw(){
					ctx.drawImage(img,0,0,img.width,img.height)
				}
				
			}
		}	
	</script>
</html>

在canvas中設置背景(需要image對象)
1.createPattern(image, repetition)
image:圖像源
repetition:
“repeat”
“repeat-x”
“repeat-y”
“no-repeat”

一般情況下，我們都會將createPattern返回的對象作爲fillstyle的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				var img = new Image();
				img.src="tg.png";
				img.onload=function(){
					draw();
				}
				
				function draw(){
					var pattern = ctx.createPattern(img,"no-repeat")
					ctx.fillStyle=pattern;
					ctx.fillRect(0,0,300,300);
				}	
			}
		}	
	</script>
</html>

線性漸變

createLinearGradient(x1, y1, x2, y2)

表示漸變的起點 (x1,y1) 與終點 (x2,y2)

gradient.addColorStop(position, color)

gradient :createLinearGradient的返回值

addColorStop 方法接受 2 個參數，

position 參數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。

例如，0.5 表示顏色會出現在正中間。

color 參數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
					var gradient =  ctx.createLinearGradient(0, 0, 200, 200);
					gradient.addColorStop(0,"red");
					gradient.addColorStop(0.5,"yellow");
					gradient.addColorStop(0.7,"pink");
					gradient.addColorStop(1,"green");
					ctx.fillStyle=gradient;
					ctx.fillRect(0,0,300,300);
				
			}
		}
		
		
	</script>
</html>

徑向漸變

createRadialGradient(x1, y1, r1, x2, y2, r2)

前三個參數則定義另一個以(x1,y1) 爲原點，半徑爲 r1 的圓，

後三個參數則定義另一個以 (x2,y2) 爲原點，半徑爲 r2 的圓。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
					var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
					gradient.addColorStop(0,"red");
					gradient.addColorStop(0.5,"yellow");
					gradient.addColorStop(0.7,"pink");
					gradient.addColorStop(1,"green");
					ctx.fillStyle=gradient;
					ctx.fillRect(0,0,300,300);
				
			}
		}
	</script>
</html>

繪製文本

在canvas中繪製文本

canvas 提供了兩種方法來渲染文本:

fillText(text, x, y)

在指定的(x,y)位置填充指定的文本

strokeText(text, x, y)

在指定的(x,y)位置繪製文本邊框

文本樣式

font = value

當前我們用來繪製文本的樣式. 這個字符串使用和 CSS font 屬性相同的語法.

默認的字體是 10px sans-serif。

font屬性在指定時，必須要有大小和字體缺一不可

textAlign = value

文本對齊選項. 可選的值包括： left, right center.

left

文本左對齊。

right

文本右對齊。

center

文本居中對齊。

這裏的textAlign="center"比較特殊。textAlign的值爲center時候文本的居中是基於你在fillText的時候所給的x的值，也就是說文本一半在x的左邊，一半在x的右邊

textBaseline = value

描述繪製文本時，當前文本基線的屬性。

top

文本基線在文本塊的頂部。

middle

文本基線在文本塊的中間。

bottom

文本基線在文本塊的底部。

measureText

measureText() 方法返回一個 TextMetrics 對象，包含關於文本尺寸的信息（例如文本的寬度）

canvas中文本水平垂直居中

陰影(文本陰影&盒模型陰影)

shadowOffsetX = float

shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們默認都爲 0。

shadowBlur = float

shadowBlur 用於設定陰影的模糊程度，其數值並不跟像素數量掛鉤，也不受變換矩陣的影響，默認爲 0。

shadowColor = color(必需項)

shadowColor 是標準的 CSS 顏色值，用於設定陰影顏色效果，默認是全透明的黑色。

像素操作

在canvas中的像素操作

到目前爲止，我們尚未深入瞭解Canvas畫布真實像素的原理，事實上，你可直接通過ImageData對象操縱像

素數據，直接讀取或將數據數組寫入該對象中得到場景像素數據

getImageData():獲得一個包含畫布場景像素數據的ImageData對像,它代表了畫布區域的對象數據

ImageData = ctx.getImageData(sx, sy, sw, sh)

sx:將要被提取的圖像數據矩形區域的左上角 x 座標。

sy:將要被提取的圖像數據矩形區域的左上角 y 座標。

sw:將要被提取的圖像數據矩形區域的寬度。

sh:將要被提取的圖像數據矩形區域的高度。

ImageData對象

ImageData對象中存儲着canvas對象真實的像素數據，它包含以下幾個只讀性：

width:圖片寬度，單位是像素

height:圖片高度，單位是像素

data:Uint8ClampedArray類型的一維數組，包含着RGBA格式的整型數據，範圍在0至255之間（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle="rgba(255, 192, 203,1)";
				ctx.fillRect(0,0,100,100);
				//100*100 10000個像素點
				
				/*imageData
					width:橫向上像素點的個數
					height:縱向上像素點的個數
					data:數組
						每一個像素點的rgba信息
				*/
						
				var imageData = ctx.getImageData(0,0,100,100);
				console.log(imageData.data);
				for(var i=0;i<imageData.data.length;i++){
					imageData.data[4*i+0]=255;
					imageData.data[4*i+1]=255;
					imageData.data[4*i+2]=255;
					imageData.data[4*i+3]=255;
				}
				ctx.putImageData(imageData,0,0)	
			}
		}	
	</script>
</html>

在場景中寫入像素數據

putImageData()方法去對場景進行像素數據的寫入。

putImageData(myImageData, dx, dy)

dx和dy參數表示你希望在場景內左上角繪製的像素數據所得到的設備座標

創建一個ImageData對象

ctx.createImageData(width, height);

width : ImageData 新對象的寬度。

height: ImageData 新對象的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
//				ctx.fillStyle="rgba(255, 192, 203,1)";
//				ctx.fillRect(0,0,100,100);
				//100*100 10000個像素點
				
				/*imageData
					width:橫向上像素點的個數
					height:縱向上像素點的個數
					data:數組
						每一個像素點的rgba信息
				*/
					
				//默認創建出來 rgba(0,0,0,0)
				var imageData = ctx.createImageData(100,100);
				for(var i=0;i<imageData.data.length;i++){
					imageData.data[4*i+3]=150;
				}
				ctx.putImageData(imageData,150,150)	
			}
		}
	</script>
</html>

合成

全局透明度的設置

ctx.globalAlpha = value

這個屬性影響到 canvas 裏所有圖形的透明度，有效的值範圍是 0.0 （完全透

明）到 1.0（完全不透明），默認是 1.0

覆蓋合成

source:新的圖像(源)

destination:已經繪製過的圖形(目標)

ctx.globalCompositeOperation

source-over(默認值):源在上面,新的圖像層級比較高

source-in :只留下源與目標的重疊部分(源的那一部分)

source-out :只留下源超過目標的部分

source-atop:砍掉源溢出的部分

destination-over:目標在上面,舊的圖像層級比較高

destination-in:只留下源與目標的重疊部分(目標的那一部分)

destination-out:只留下目標超過源的部分（用於消除舊的部分，相當於橡皮擦）

destination-atop:砍掉目標溢出的部分

源是新畫的路徑，目標是舊畫的路徑

others

將畫布導出爲圖像

toDataURL(注意是canvas元素接口上的方法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillRect(0,0,199,199);
				var result =  canvas.toDataURL();
				console.log(result);
			}
		}
		
		
	</script>
</html>

事件操作

ctx.isPointInPath(x, y)

判斷在當前路徑中是否包含檢測點

x:檢測點的X座標

y:檢測點的Y座標

注意，此方法只作用於最新畫出的canvas圖像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到畫布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.arc(100,100,50,0,360*Math.PI/180);
				ctx.fill();
				
				ctx.beginPath();
				ctx.arc(200,200,50,0,360*Math.PI/180);
				ctx.fill();
				
				canvas.onclick=function(ev){
					ev = ev||event;
					var x = ev.clientX - canvas.offsetLeft;
					var y = ev.clientY - canvas.offsetTop;
					if(ctx.isPointInPath(x,y)){
						alert(123);
					}
				}
				
			}
		}	
	</script>
</html>

音視頻

音頻&視頻的介紹

大家都有在網頁中瀏覽視頻的經歷，但在Html5之前，對視頻乃至音頻都還沒有一個標準

因此在網頁中看到的視頻，都是通過第三插件的方式嵌入的，可能QuickTime也可能是RealPlayer 或者

Flash。瀏覽器很好的整合了這些插件，你完全意識不到它們的存在

在介紹Html5中的音視頻標籤前，我們需要了解一些概念

1、容器

大多數人會認爲視頻文件就是 .avi .mp4,但事實上 avi和mp4僅僅是容器的格式，它只決定怎麼將視頻

存儲起來，而不關係存儲的內容。有點類似於.zip

不管是音頻文件或視頻文件，實際上都只是一個容器文件。這點類似於壓縮了一組文件的ZIP文件視頻

文件（視頻容器）包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放的時候，音頻軌道和視頻軌道是綁

定在一起的。元數據包含了視頻的封面、標題、子標題、字幕等相關信息。

主流的視頻文件格式(容器格式)	主流的音頻文件格式
MPEG-4: 通常以.mp4爲擴展名	MPEG-3 .mp3
Flash視頻: 通常以.flv爲擴展名	Acc音頻 .acc
Ogg: 通常以.ogv爲擴展名	Ogg音頻 .ogg
WebM: 通常以.webm爲擴展名
音頻視頻交錯: 通常以.avi爲擴展名

2、編解碼器

音頻和視頻編碼/解碼是一組算法，用來對一段特定音頻或視頻進行解碼和編碼，以便音頻和視頻能夠播

放。原始的媒體文件體積非常巨大，如果不對其進行編碼，那麼數據量是非常驚人的，在互聯網上傳播則要耗

費無法忍受的時間；如果不對其進行解碼，就無法將編碼後的數據重組爲原始的媒體數據

視頻編解碼器	音頻編解碼器
H.264	AAC
VP8	MPEG-3
Ogg Theora	Ogg Vorbis

H.264：別名 MPEG-4的第十部分,由MPEG研發並於2003年標準化
它的目的支持一切設備，無論是低帶寬低cpu，還是高帶寬高cpu 或者是兩者之間。
要做到這一點，H.264標準被分成不同的幾種配置。高配置使用了更多特性，
這會導致在解碼過程中更加消耗CPU，但視頻文件本身會更小，視頻效果也更好

					蘋果iphone手機				基本配置(BaseLine)
					正常的電視機支持        	基本配置(BaseLine) 和 主配置(Main)兩種
					正常的電腦支持  	        	基本配置(BaseLine) 和 主配置(Main) 高級配置(high)三種

當然有一些編解碼器受專利的保護，有一些則是免費的，例如Ogg的Vorbis音頻編解碼器。

Ogg的Theora視頻編解碼器也是可以免費使用的。而想使用H.264的話就需要支付相關的費用了

現在的視頻編解碼器會使用各種技巧減少從一幀到另一幀過程中傳遞的信息數量，它們不會存儲每一幀的所有

信息，而只是存儲兩幀之間的差異信息。

編碼器也分有損和無損，無損視頻文件一般太大，在網頁中沒有優勢，所以我們重點研究有損編解碼器。

有損編解碼器中，信息在編碼過程中丟失是無法避免的，反覆的對視頻編碼會導致其畫面不均勻。

3.瀏覽器對於容器和編解碼器支持的情況

Browser MP4(H.264 + AAC) WebM(VP8 + Vorbis ) Ogg(Theora + Vorbis)

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES

http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/

目前還沒有一種編解碼和容器的組合能應用於所有的瀏覽器中！！！

4、處理視頻的一個流程

1.製作一個Ogg容器中使用Theora視頻和Vorbis音頻的版本

2.製作另外一個版本，使用WebM視頻容器（VP8 + Vorbis）

3.再製作一個版本，使用MP4視頻容器，並使用H.264基本配置的視頻和ACC低配的音頻

4.鏈接上面3個文件到同一個video元素，並向後兼容基於Flash的視頻播放器

5、格式轉化
用 FFmpeg 製作MP4 視頻
ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4

用 FFmpeg 製作 WebM 視頻
ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm

FFmpeg 製作 Ogg 視頻
ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv

FFmpeg 製作Mp3音頻
ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

FFmpeg 製作Ogg音頻
ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg

FFmpeg 製作ACC音頻
ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

H5中對音視頻的設計

html5標籤

<video>
    	Html5提供的播放視頻的標籤
		src:資源地址
		controls:該屬性定義是顯示還是隱藏用戶控制界面
<audio>
    	Html5提供的播放音頻的標籤
		src:資源地址
		controls:該屬性定義是顯示還是隱藏用戶控制界面
<source>
		視頻：
		type='video/webm; codecs="vp8, vorbis"'
		type='video/ogg; codecs="theora, vorbis"'
		type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	
		音頻：
		type='audio/ogg; codecs="vorbis"'
		type='audio/aac; codecs="aac"'
		type='audio/mpeg'

video標籤的屬性

width :視頻顯示區域的寬度，單位是CSS像素

height :視頻展示區域的高度，單位是CSS像素

poster :一個海報幀的URL，用於在用戶播放或者跳幀之前展示

src：要嵌到頁面的視頻的URL

controls : 顯示或隱藏用戶控制界面

autoplay : 媒體是否自動播放

loop : 媒體是否循環播放

muted : 是否靜音

preload : 該屬性旨在告訴瀏覽器作者認爲達到最佳的用戶體驗的方式是什麼

none: 提示作者認爲用戶不需要查看該視頻，服務器也想要最小化訪問流量；

換句話說就是提示瀏覽器該視頻不需要緩存。

metadata: 提示儘管作者認爲用戶不需要查看該視頻，不過抓取元數據（比如：長度）還是很合

理的。

auto: 用戶需要這個視頻優先加載；換句話說就是提示：如果需要的話，可以下載整個視頻，即使

用戶並不一定會用它。

空字符串：也就代指 auto 值。

audio標籤的屬性

src

controls

autoplay

loop

muted

preload

音視頻js相關屬性：

duration : 媒體總時間(只讀)

currentTime : 開始播放到現在所用的時間(可讀寫)

muted : 是否靜音(可讀寫,相比於volume優先級要高)

volume : 0.0-1.0的音量相對值(可讀寫)

paused : 媒體是否暫停(只讀)

ended : 媒體是否播放完畢(只讀)

error : 媒體發生錯誤的時候，返回錯誤代碼 (只讀)

currentSrc : 以字符串的形式返回媒體地址(只讀)

視頻多的部分：

poster : 視頻播放前的預覽圖片(讀寫)

width、height : 設置視頻的尺寸(讀寫)

videoWidth、 videoHeight : 視頻的實際尺寸(只讀)

音視頻js相關函數

play() : 媒體播放

pause() : 媒體暫停

load() : 重新加載媒體

js相關事件

視頻:

abort 在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。

canplay 在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的

readyState。

canplaythrough 在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，表明媒體可以在保持當前的下載

速度的情況下不被中斷地播放完畢。注意：手動設置currentTime會使得firefox觸發一次canplaythrough事

件，其他瀏覽器或許不會如此。

durationchange 元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度

從而得知總長度時會觸發這個事件。

emptied 媒體被清空（初始化）時觸發。

ended 播放結束時觸發。

error 在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling獲得詳細信息

loadeddata 媒體的第一幀已經加載完畢。

loadedmetadata 媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息。

loadstart 在媒體開始加載時觸發。

mozaudioavailable 當音頻數據緩存並交給音頻層處理時

pause 播放暫停時觸發。

play 在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放。

playing 在媒體開始播放時觸發（不論是初次播放、在暫停後恢復、或是在結束後重新開始）。

progress 告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息可以在元素的

buffered屬性中獲取到。

ratechange 在回放速率變化時觸發。

seeked 在跳躍操作完成時觸發。

seeking 在跳躍操作開始時觸發。

stalled 在嘗試獲取媒體數據，但數據不可用時觸發。

suspend 在媒體資源加載終止時觸發，這可能是因爲下載已完成或因爲其他原因暫停。

timeupdate 元素的currentTime屬性表示的時間已經改變。

volumechange 在音頻音量改變時觸發（既可以是volume屬性改變，也可以是muted屬性改變）.

waiting 在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發

音頻:

abort 在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。

canplay 在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的

readyState。

canplaythrough 在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，表明媒體可以在保持當前的下載

速度的情況下不被中斷地播放完畢。注意：手動設置currentTime會使得firefox觸發一次canplaythrough事

件，其他瀏覽器或許不會如此。

durationchange 元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度

從而得知總長度時會觸發這個事件。

emptied 媒體被清空（初始化）時觸發。

ended 播放結束時觸發。

error 在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling獲得詳細信息

loadeddata 媒體的第一幀已經加載完畢

loadedmetadata 媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息

loadstart 在媒體開始加載時觸發

mozaudioavailable 當音頻數據緩存並交給音頻層處理時

pause 播放暫停時觸發

play 在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放

playing 在媒體開始播放時觸發（不論是初次播放、在暫停後恢復、或是在結束後重新開始）

progress 告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息可以在元素的

buffered屬性中獲取到。

ratechange 在回放速率變化時觸發。

seeked 在跳躍操作完成時觸發。

seeking 在跳躍操作開始時觸發。

stalled 在嘗試獲取媒體數據，但數據不可用時觸發。

suspend 在媒體資源加載終止時觸發，這可能是因爲下載已完成或因爲其他原因暫停。

timeupdate 元素的currentTime屬性表示的時間已經改變。

volumechange 在音頻音量改變時觸發（既可以是volume屬性改變，也可以是muted屬性改變）

waiting 在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發

語義化標籤

狀態標籤

meter:用來顯示已知範圍的標量值或者分數值。

value:當前的數值。

min:值域的最小邊界值。如果設置了，它必須比最大值要小。如果沒設置，默認爲0

max:值域的上限邊界值。如果設置了，它必須比最小值要大。如果沒設置，默認爲1

low:定義了低值區間的上限值,如果設置了，它必須比最小值屬性大，並且不能超過high值和

最大值。未設置或者比最小值還要小時，其值即爲最小值。

high:定義了高值區間的下限值。如果設置了，它必須小於最大值，同時必須大於low值和最

小值。如果沒有設置，或者比最大值還大，其值即爲最大值

optimum:這個屬性用來指示最優/最佳取值

progress:用來顯示一項任務的完成進度

max:該屬性描述了這個progress元素所表示的任務一共需要完成多少工作

value：該屬性用來指定該進度條已完成的工作量.

如果沒有value屬性,則該進度條的進度爲"不確定"，也就是說,進度條不會顯示任何進度,你無

法估計當前的工作會在何時完成

列表標籤

datalist:datalist會包含一組option元素，這些元素表示其表單控件的可選值

它的id必須要和input中的list一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			input::-webkit-input-placeholder{
				color: pink;
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="你最喜歡的女明星是？" list="zdy"></input>
		<datalist id="zdy">
			<option value="1">10歲的周冬雨</option>
			<option value="2">20歲的周冬雨</option>
			<option value="3">30歲的周冬雨</option>
			<option value="4">40歲的周冬雨</option>
		</datalist>
	</body>
</html>

details: 一個ui小部件，用戶可以從其中檢索附加信息

open屬性來控制附加信息的顯示與隱藏

summary:用作一個<details>元素的一個內容摘要（標題）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<details>
			<summary>尚硅谷男生張曉飛</summary>
			<p>一個神一樣的男人</p>
			<p>一個神一樣的男人</p>
			<p>一個神一樣的男人</p>
		</details>
	</body>
</html>

註釋標籤

ruby
rt: 展示文字注音或字符註釋

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span><ruby>方<rt>fang</rt>曉飛張</ruby></span>
	</body>
</html>

標記標籤

marK:着重

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>曉飛同志是在<mark>世紀佳緣</mark>註冊過的會員，他美麗的老婆就是來自於世紀佳緣</span>
	</body>
</html>

瘋狂的表單

Htnl5之前的表單

標籤爲input

type:text:文本框

type:password:密碼框

type:\radio:單選按鈕

注意以name分組，確保單選關係，也爲了後臺能成功獲取

必須有value屬性，爲了後臺獲取後的識別（不寫統一爲on)

type:checkbox:複選框

注意以name分組，確保爲一組，也爲了後臺能成功獲取

必須有value屬性，爲了後臺獲取後的識別（不寫統一爲on）

type:submit:提交按鈕

type:reset:重置按鈕

type:button:普通按鈕

標籤爲select:下拉框

name屬性在select標籤上

multiple:可選多項

子項可以通過optgroup來進行分組，label屬性用來定義組名

子項爲option標籤

selected屬性,選中控制

必須有value屬性,爲了後臺獲取後的識別

標籤爲textarea:文本域

	**標籤爲button:按鈕**
			type:submit:提交按鈕
			type:reset:重置按鈕
			type:button:普通按鈕
		
	**標籤爲lable:控制文本與表單的關係**
			for屬性指向一個input的id
		
	**標籤fieldset 標籤legend:來爲表單分組**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>用戶名</legend>
				<input type="input"></input>
			</fieldset>
		</form>
	</body>
</html>

Html5 新增

新增表單控件

1、type:email :email地址類型

當格式不符合email格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交纔會通過

在移動端獲焦的時候會切換到英文鍵盤

2、type:tel :電話類型

在移動端獲焦的時候會切換到數字鍵盤

3、type:url :url類型

當格式不符合url格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交纔會通

4、type:search :搜索類型

有清空文本的按鈕

5、type:range : 特定範圍內的數值選擇器

屬性:min、max、step

6、type:number : 只能包含數字的輸入框

type:color : 顏色選擇器

type:datetime : 顯示完整日期(移動端瀏覽器支持)

type:datetime-local : 顯示完整日期，不含時區

type:time : 顯示時間，不含時區

type:date : 顯示日期

type:week : 顯示周

type:month : 顯示月

新增表單屬性

placeholder : 輸入框提示信息

適用於form,以及type爲text,search,url,tel,email,password類型的input

選擇器中怎麼選中placeholder的文本？
::-webkit-input-placeholder–>

autofocus : 指定表單獲取輸入焦點

required : 此項必填，不能爲空

pattern : 正則驗證 pattern="\d{1,5}

formaction 在submit裏定義提交地址

list和datalist : 爲輸入框構造一個選擇列表

list值爲datalist標籤的id

<!DOCTYPE HTML>
<html>
<body>

<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
</datalist>

</body>
</html>

表單驗證反饋

validity對象，通過下面的valid可以查看驗證是否通過，如果八種驗證都通過返回true，一種驗證失敗返false，提交前，先驗證，驗證通過才能提交出去

node.addEventListener(“invalid”,fn1,false);

valueMissing : 輸入值爲空時返回true

typeMismatch : 控件值與預期類型不匹配返回true

patternMismatch : 輸入值不滿足pattern正則返回true

tooLong : 超過maxLength最大限制返回true

rangeUnderflow : 驗證的range最小值返回true

rangeOverflow : 驗證的range最大值返回true

stepMismatch : 驗證range 的當前值是否符合min、max及step的規則返回true

customError 不符合自定義驗證返回true

setCustomValidity

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form >
			<input type="text" maxLength="3" />
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var inputEl = document.querySelector("input");
			inputEl.addEventListener("invalid",function(){
				console.log(this.validity)
			})
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form >
			<input type="text"  />
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var inputEl = document.querySelector("input");
			var submit = document.querySelectorAll("input")[1];
			submit.onclick=function(){
				var val = inputEl.value;
				if(val=="xfz"){
					submit.setCustomValidity("請不要輸入敏感詞")
				}else{
					submit.setCustomValidity("")
				}
			}
			
			submit.addEventListener("invalid",function(){
				console.log(submit.validity)
			})
		}	
	</script>
</html>

關閉驗證

formnovalidate屬性