目前HTML5技術已漸漸成為主流，主流的瀏覽器都已支持HTML5。越來越多的應用使用了HTML5的元素，如canvas、video等，另外網頁存儲功能更增加了用戶的網絡體驗，使得越來越多的開發者在使用這樣的標準，所以我們也需要學習如何使用自動化技術來測試它們。

　　WebDriver支持在指定的瀏覽器上測試HTML5，另外，我們還可以使用JavaScript來測試這些功能，這樣就可以在任何瀏覽器上測試HTML5了。

　　大多數瀏覽器使用控件（如Flash）來播放視頻，但是，不同的瀏覽器需要使用不同的插件。HTML5定義了一個新的元素<video>，指定了一個標準的方式來嵌入電影片段，IE9+、Firefox、Opera、Chrome都支持該元素。

代碼如下圖：

　　JavaScript函數有個內置的對象叫做arguments。Arguments對象包含了函數調用的參數組，[0]表示取對象的第一個值。

　　currentSrc熟悉返回當前音頻/視頻的URL。如果未設置音頻/視頻，則返回空字符串。Load()、play()、pause()等控制著視頻的加載、播放、暫停。

一篇文章《HTML5(五)——Canvas API》介紹 canvas 繪制基本圖形，這節開始介紹canvas的高級操作。

一、canvas 轉換

canvas 轉換常用的幾種方法介紹，如下：

1.1 、scale - 縮放

使用語法：scale(x,y)

x：表示水平方向的縮放倍數

y：表示垂直方向的縮放倍數

eg：canvas 繪制的矩形框放大兩倍，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.scale(2,2)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

1.2、translate - 畫布平移

使用語法：translate(x,y)

x：添加到水平坐標上的位置

y：添加到垂直坐標上的位置

設置之后開始繪制的圖片位置從(x,y)算起。

eg：繪制兩個一樣的矩形，一個在平移前繪制，一個在平移后繪制，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle="red"
        
ctx.fillRect(0,0,200,200)
//平移
ctx.translate(200,200)
ctx.fillRect(0,0,200,200)

運行結果如圖：

1.3 、rotate - 旋轉

使用語法：rotate(angle)

angle 旋轉弧度，如果想使用角度，可以把角度轉成弧度，公式為：deg * Path.PI/180。

eg：將一個矩形旋轉45度，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
//旋轉45度
ctx.rotate(45*Math.PI/180)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

運行結果如圖：

根據上述結果我們發現旋轉的時候，默認原點是畫布的起始點，我們想要的旋轉是在矩形框中心為原點的旋轉，此時我們需要借助上translate平移，重置一下原點，修改上述代碼為：

<canvas width="400" height="400" id="canvas"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.translate(200,200)
ctx.rotate(45*Math.PI/180)
ctx.translate(-200,-200)

ctx.fillStyle="red"
ctx.fillRect(100,100,200,200)

運行結果如圖：

1.4、transform - 矩陣變換

使用語法：transform(a,b,c,d,e,f)

• a:水平縮放
• b:水平傾斜
• c:垂直傾斜
• d:垂直縮放
• e:水平移動
• f:垂直移動

transform可以替代前邊平移、縮放、旋轉三者，如下：

// 平移
translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)

// 縮放
sacle(x,y) <=> transform(x,0,0,y,0,0) 

// 旋轉
rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))

1.5、setTransform - 矩陣變換

setTransform()方法將變換的矩陣進行重置，它把當前的變換矩陣重置為單位矩陣
使用語法：transform(a,b,c,d,e,f)
各參數說明：水平旋轉、水平傾斜、垂直傾斜、垂直縮放、水平移動、垂直移動

setTransform() 方法把當前的變換矩陣重置為單位矩陣，然后以相同的參數運行 transform()。

二、canvas 操作圖片

drawImage() 在畫布上繪制圖像、畫布或視頻。也能夠繪制圖片的一部分，增加或減少圖像的尺寸。以下是三種常見使用語法：

• 語法1：drawImage( img , x , y )
• 語法2：drawImage( img , x , y , width , height )
• 語法3：drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

上述參數表示的意義如下：

eg：利用語法3，進行繪制圖片的部分內容，實現如下效果：

給上述兔子順便加一個點擊屏幕暫停開始功能，完整代碼如下：

<canvas width="400" height="400" id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
 var img = new Image()
 let pause = false,frameCounter = 0,i=0;
 img.src = "./rotate.png"
 img.onload = function(){
  requestAnimationFrame(next)
 }
function next(){
 ctx.clearRect(0,0,canvas.width,canvas.height)
 if(frameCounter%5 == 0){ //frameCounter 控制動畫速度
  i++
  if(i==11)i=0
 }
 ctx.drawImage(img,
  0,i*240,240,240,
  0,0,240,240) // 每張圖片寬高都是240，具體參數根據圖片而定
  frameCounter ++
  if(!pause)requestAnimationFrame(next)
 }
window.onclick = function(){
 pause = !pause
 next()
}
</script>

eg：使用 canvas 畫布處理視頻，使用定時器繪制視頻的當前幀，連續起來就是一個視頻，需要注意的是必須處理暫停和開始播放兩種操作，具體代碼如下：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

三、像素級操作

常見的像素級的操作有三種：

• getImageData() - 獲取畫布像素數據
• createImageData() - 創建新的、空白像素
• putImageData() - 圖像像素數據放回畫布

3.1、getImageData

使用語法：getImageData( x , y , width , height )

• x：要被提取的圖像數據矩形區域的左上角 x 坐標。
• y：要被提取的圖像數據矩形區域的左上角 y 坐標。
• width：被提取的圖像數據矩形區域的寬度
• height：被提取的圖像數據矩形區域的高度

返回一個 imageData 對象，用來描述 canvas 區域隱含的像素數據，這個區域通過像素表示，起點是( x , y )，寬高為 widht 和 height 。

imageData 對象包含三個屬性：

• imageData.height - 像素描述的矩形實際高度。
• imageData.width - 像素描述的矩形實際寬度。
• imageData.data - 包含 rgba 順序數據的一個數組，數據使用0-255直接整數表示。

3.2、createImageData

使用語法：

createImageData( width , height )

創建一個空白的 imageData 對象，新對象的默認像素值 transparent black。對于imageData對象中的每個像素值，都存在 rgba 這四方面的信息，即：

• r - 紅色（0-255）
• g - 綠色（0-255）
• b - 藍色（0-255）
• a - alpha（0-255,0是透明，255是完全可見）

新對象默認像素值為（0,0,0,0）。

eg：如果我們想把 imageData 中一個像素變為紅色時，可以改變第一和第四位信息，代碼如下：

var imageData = ctx.createImageData(100,100)
imageData.data[0] = 255
imageData.data[1] = 0
imageData.data[2] = 0
imageData.data[3] = 255

3.1、putImageData

使用語法：

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

參數及意義：

通過 getImageData 復制的指定矩形像素數據，編輯之后，通過 putImageData 方法將圖像數據放回畫布上。

eg：添加濾鏡效果：上述兔子是白色的變換成紅色兔子，這時需要把綠色和藍色都設置成0即可，代碼如下：