JavaScript學(xué)習(xí)筆記整理（15）：多媒體、Canvas和SVG

由于不同的瀏覽器對(duì)標(biāo)準(zhǔn)音頻和視頻的編解碼支持上并不一致，所以通常需要使用<source>元素來(lái)為指定不同格式的媒體源：

<audio id="music">
  <source src="m.mp3" type="audio/mpeg">
  <source src="m.ogg" type="audio/ogg;codec='vorbis'">
</audio>

<source>元素沒有任何內(nèi)容：沒有閉合的</source>標(biāo)簽，也需要使用“/>”來(lái)結(jié)束它們。

我們可以在<audio>和</audio>（或<video>和</video>）標(biāo)簽之間插入文本內(nèi)容，如果瀏覽器支持<audio>和<video>元素，將不會(huì)渲染文本內(nèi)容；而如果瀏覽器不支持時(shí)，則會(huì)將它們渲染出來(lái)。

<audio id="music">   
  <source src="m.mp3" type="audio/mpeg">   
  <source src="m.ogg" type="audio/ogg;codec='vorbis'">  
  您的瀏覽器不支持audio標(biāo)簽。
</audio>

1.1 HTML中媒體的屬性

（1）視頻（<video>）

autoplay    autoplay    如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls    controls    如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
height      pixels      設(shè)置視頻播放器的高度。
width       pixels      設(shè)置視頻播放器的寬度。
loop        loop        如果出現(xiàn)該屬性，則循環(huán)播放。
muted       muted       如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
poster      URL         規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶點(diǎn)擊播放按鈕。 preload     auto/metadata/none   如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
src         URL         要播放的視頻的 URL。

（2）音頻（<audio>）

autoplay    autoplay    如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls    controls    如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
loop        loop        如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
muted       muted       如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
preload     auto/metadata/none    如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
src         URL         要播放的視頻的 URL。

1.2 用JavaScript操作音頻和視頻

audio可以通過(guò)new創(chuàng)建Audio對(duì)象

var music = new Audio('m.mp3');

還可以通過(guò)標(biāo)簽獲取<audio>或<video>元素，即獲得HTMLVideoElement和HTMLAudioElement對(duì)象：

var music = document.getElementById('music');

檢測(cè)瀏覽器是否支持

var hasAudio = !!(music.canPlayType); //通過(guò)!!運(yùn)算符將結(jié)果轉(zhuǎn)換成布爾值

（1）屬性

只讀屬性：

duration   整個(gè)媒體文件的播放時(shí)長(zhǎng)，以秒為單位。如果無(wú)法獲取時(shí)長(zhǎng)，則返回NaN  
paused     如果媒體文件當(dāng)前被暫停，則返回true。如果還未開始播放，默認(rèn)返回true  
ended      如果媒體文件已經(jīng)播放完畢，則返回true  
startTime  返回最早的播放起始時(shí)間，一般是0.0，除非是緩沖過(guò)的媒體文件，并且一部分內(nèi)容已經(jīng)不在緩沖區(qū)  
error      在發(fā)生了錯(cuò)誤的情況下返回的錯(cuò)誤代碼  
currentSrc 以字符串形式返回當(dāng)前正在播放或已加載的文件。對(duì)應(yīng)于瀏覽器在source元素中選擇的文件
seeking    如果播放器正在跳到一個(gè)新的播放點(diǎn)，那seeking的值為true。
initialTime  指定了媒體的開始時(shí)間，單位為秒

可讀寫屬性：

autoplay     將媒體文件設(shè)置為創(chuàng)建后自動(dòng)播放，或者查詢是否已設(shè)置為autoplay  
loop         返回是否循環(huán)播放，或設(shè)置循環(huán)播放（或者不循環(huán)播放）  
currentTime  指定了播放器應(yīng)該跳過(guò)播放的時(shí)間（單位為秒）。在播放過(guò)程中，可設(shè)置currentTime屬性來(lái)進(jìn)行定點(diǎn)播放。
controls     顯示或隱藏用戶控制界面，或者查詢用戶控制界面當(dāng)前是否可見  
volume       在0.0到1.0之間設(shè)置音頻音量的相對(duì)值，或者查詢當(dāng)前音量相對(duì)值  
muted        布爾值，設(shè)置靜音或者消除靜音，或者檢測(cè)當(dāng)前是否為靜音  
autobuffer   通知播放器在媒體文件開始播放前，是否驚醒緩沖加載。如果已設(shè)置為autoplay，則忽略此特性
playbackRate  用于指定媒體播放的速度。1.0表示正常速度，大于1則表示“快進(jìn)”，0~1之間表示“慢放”，負(fù)值表示回放。

三個(gè)特殊屬性：

played 返回已經(jīng)播放的時(shí)間段  
buffered 返回當(dāng)前已經(jīng)緩沖的時(shí)間段  
seekable 返回當(dāng)前播放器需要跳到的時(shí)間段

played、buffered和seekable都是TimeRanges對(duì)象，每個(gè)對(duì)象都有一個(gè)length屬性以及start(index)和end(index)方法，前者表示當(dāng)前一個(gè)時(shí)間段，后者分別返回當(dāng)前時(shí)間段的起始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)（單位為秒）。

還有另外三個(gè)屬性：

readyState、networkState和error，它們包含<audio>和<video>元素的一些狀態(tài)細(xì)節(jié)。每個(gè)屬性都是數(shù)字類型的，而且為每個(gè)有效值都定義了對(duì)應(yīng)的常量。

readyState屬性指定當(dāng)前已經(jīng)加載了多少媒體內(nèi)容，只讀屬性

HAVE_NOTHING（數(shù)字值為0）：沒有獲取到媒體的任何信息，當(dāng)前播放位置沒有可播放數(shù)據(jù)。  
HAVE_METADATA（數(shù)字值為1）：已經(jīng)獲取到足夠的媒體數(shù)據(jù)，但是當(dāng)前播放位置沒有有效的媒體數(shù)據(jù)（也就是說(shuō)，獲取到的媒體數(shù)據(jù)無(wú)效，不能播放）。  
HAVE_CURRENT_DATA（數(shù)字值為2）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，但沒有獲致到可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前帖的數(shù)據(jù)已獲取，但沒有獲取到下一幀的數(shù)據(jù)，或者當(dāng)前幀已經(jīng)是播放的最重一幀。  
HAVE_FUTURE_DATA（數(shù)字值為3）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，而且也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前幀的數(shù)據(jù)已獲取，而且也獲取到了下刺目販數(shù)據(jù)，當(dāng)前幀是播放的最后一幀時(shí)，readyState屬性不可能為HAVE_FUTURE_DTAT。  HAVE_ENOUGH)DATA（數(shù)字值為4）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，同時(shí)也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)，而且瀏覽器確認(rèn)媒體以某一種速度進(jìn)行加載，可以保證有足夠的后續(xù)數(shù)據(jù)進(jìn)行播放。

networkState屬性

networkState屬性讀取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，共有如下所示的4個(gè)可能值：

NETWORK_EMPTY（數(shù)字值為0）：元素牌初始狀態(tài)。  
NETWORK_IDLE（數(shù)字值為1）：瀏覽器已選擇好用什么編碼格式來(lái)播放媒體，但尚未建立網(wǎng)絡(luò)連接。  
NETWORK_LOADING（數(shù)字值為2）：媒體數(shù)據(jù)加載中。  
NETWORK_NO_SOURCE（數(shù)字值為3）：沒有支持的編碼格式，不執(zhí)行加載。

error屬性

當(dāng)在加載媒體或者播放媒體過(guò)程中發(fā)生錯(cuò)誤時(shí)，瀏覽器就會(huì)設(shè)置<audio>或<video>元素的error屬性。在沒有錯(cuò)誤發(fā)生時(shí)，error屬性值為null。反之，error的屬性是一個(gè)對(duì)象，包含了描述錯(cuò)誤的數(shù)值code屬性，error.code可能的值：

MEDIA_ERR_ABORTED(數(shù)字值為1）：媒體數(shù)據(jù)的下載過(guò)程由于用戶的操作原因而被中止。  
MEDIA_ERR_NETWORK(數(shù)字值為2）：確認(rèn)媒體資源可用，但是在下載時(shí)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤，媒體數(shù)據(jù)下載過(guò)程被中止。  
MEDIA_ERR_DECODE(數(shù)字值為3)：確認(rèn)媒體資源可能，但是解碼時(shí)發(fā)生錯(cuò)誤。  
MEDIA_ERR_SRC_NOT_SUPPORTED（數(shù)字值為4）：媒體格式不被支持。

video的額外屬性：

poster	在視頻加載完成之前，代表視頻內(nèi)容的圖片的URL地址。該特性可讀可修改  
width、height	讀取或設(shè)置顯示尺寸。如果大小不匹配視頻本身，會(huì)導(dǎo)致邊緣出現(xiàn)黑色條狀區(qū)域  
videoWidth、videoHeight	返回視頻的固有或自使用寬度和高度。只讀

（2）方法

canPlayType(type)方法將媒體的MIME類型作為參數(shù)，用來(lái)測(cè)試瀏覽器是否支持指定的媒體類型。如果它不能播放該類型的媒體文件，將返回一個(gè)空的字符串；反之，它會(huì)返回一個(gè)字符串：“maybe”或“probably”。

var a = new Audio();
if(a.canPlayType('audio/wav')){
  a.src = 'm.wav';
  a.play();
}

其他方法：

play()   控制媒體開始播放
pause()  暫停媒體播放
load()   重新加載src指定的資源

（3）事件

audio元素和video元素加載音頻和視頻時(shí)，以下事件按次序發(fā)生。

loadstart：開始加載音頻和視頻。  
durationchange：音頻和視頻的duration屬性（時(shí)長(zhǎng)）發(fā)生變化時(shí)觸發(fā)，即已經(jīng)知道媒體文件的長(zhǎng)度。如果沒有指定音頻和視頻文件，duration屬性等于NaN。如果播放流媒體文件，沒有明確的結(jié)束時(shí)間，duration屬性等于Inf（Infinity）。  
loadedmetadata：媒體文件的元數(shù)據(jù)加載完畢時(shí)觸發(fā)，元數(shù)據(jù)包括duration（時(shí)長(zhǎng)）、dimensions（大小，視頻獨(dú)有）和文字軌。  
loadeddata：媒體文件的第一幀加載完畢時(shí)觸發(fā)，此時(shí)整個(gè)文件還沒有加載完。  
progress：瀏覽器正在下載媒體文件，周期性觸發(fā)。下載信息保存在元素的buffered屬性中。  
canplay：瀏覽器準(zhǔn)備好播放，即使只有幾幀，readyState屬性變?yōu)镃AN_PLAY。  
canplaythrough：瀏覽器認(rèn)為可以不緩沖（buffering）播放時(shí)觸發(fā)，即當(dāng)前下載速度保持不低于播放速度，readyState屬性變?yōu)镃AN_PLAY_THROUGH。

除了上面這些事件，audio元素和video元素還支持以下事件。

abort	播放中斷  
emptied	媒體文件加載后又被清空，比如加載后又調(diào)用load方法重新加載。  
ended	播放結(jié)束  
error	發(fā)生錯(cuò)誤。該元素的error屬性包含更多信息。  
pause	播放暫停  
play	暫停后重新開始播放  
playing	開始播放，包括第一次播放、暫停后播放、結(jié)束后重新播放。  
ratechange	播放速率改變  
seeked	搜索操作結(jié)束  
seeking	搜索操作開始  
stalled	瀏覽器開始嘗試讀取媒體文件，但是沒有如預(yù)期那樣獲取數(shù)據(jù)  
suspend	加載文件停止，有可能是播放結(jié)束，也有可能是其他原因的暫停  
timeupdate	網(wǎng)頁(yè)元素的currentTime屬性改變時(shí)觸發(fā)。  
volumechange	音量改變時(shí)觸發(fā)（包括靜音）。  
waiting	由于另一個(gè)操作（比如搜索）還沒有結(jié)束，導(dǎo)致當(dāng)前操作（比如播放）不得不等待。

二、canvas

HTML5<canvas>元素用于圖形的繪制，通過(guò)腳本 (通常是JavaScript)來(lái)完成。

<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形。

要使用Canvas API，首先需要新建一個(gè)<canvas>網(wǎng)頁(yè)元素

<canvas id="canvas" width="400" height="200">
  您的瀏覽器不支持canvas！
</canvas>

width 和 height 屬性定義的畫布的大小。

接著，我們可以通過(guò)標(biāo)簽選擇獲取到<canvas>元素：

var canvas = document.getElementById('canvas');

然后，創(chuàng)建context對(duì)象：

if(canvas.getContext){
  var ctx = canvas.getContext('2d');
}

調(diào)用getContext()方法時(shí)，傳遞一個(gè)“2d”參數(shù)，會(huì)獲得一個(gè)CanvasRenderingContext2D對(duì)象，使用該對(duì)象可以在畫布上繪制二維圖形。我們也可將CanvasRenderingContext2D簡(jiǎn)稱為“上下文對(duì)象”。

2.1 canvas的繪圖用法

canvas畫布提供了一個(gè)用來(lái)作圖的平面空間，該空間的每個(gè)點(diǎn)都有自己的坐標(biāo)，x表示橫坐標(biāo)，y表示豎坐標(biāo)。原點(diǎn)(0, 0)位于圖像左上角，x軸的正向是原點(diǎn)向右，y軸的正向是原點(diǎn)向下。

（1）繪制矩形

rect(x,y,width,height)方法用來(lái)繪制矩形。

fillRect(x, y, width, height)方法用來(lái)繪制矩形，它的四個(gè)參數(shù)分別為矩形左上角頂點(diǎn)的x坐標(biāo)、y坐標(biāo)，以及矩形的寬和高。fillStyle屬性用來(lái)設(shè)置矩形的填充色。

strokeRect(x, y, width, height)方法同樣是繪制矩形，但只畫線不填充，也可以說(shuō)是畫空心矩形。strokeStyle屬性用來(lái)設(shè)置矩形的繪制色。

clearRect(x, y, width, height)方法用來(lái)清除某個(gè)矩形區(qū)域的內(nèi)容。

（2）繪制圓形和扇形

arc(x, y, radius, startAngle, endAngle, anticlockwise)方法用來(lái)繪制圓形和扇形。

arc方法的x和y參數(shù)是圓心坐標(biāo)，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時(shí)應(yīng)該逆時(shí)針畫（true）還是順時(shí)針畫（false）。

arcTo(x1,y1,x2,y2,r)方法在畫布上創(chuàng)建介于兩個(gè)切線之間的弧/曲線。

參數(shù)：x1 弧的起點(diǎn)的 x 坐標(biāo)，y1 弧的起點(diǎn)的 y 坐標(biāo)，x2 弧的終點(diǎn)的 x 坐標(biāo)，y2 弧的終點(diǎn)的 y 坐標(biāo)，r 弧的半徑。

（3）繪制文本

fillText(string, x, y) 用來(lái)繪制文本，它的三個(gè)參數(shù)分別為文本內(nèi)容、起點(diǎn)的x坐標(biāo)、y坐標(biāo)。使用之前，需用font設(shè)置字體、大小、樣式（寫法類似與CSS的font屬性）。

strokeText(string,x,y)方法，用來(lái)添加空心字。

// 設(shè)置字體  
ctx.font = "Bold 20px Arial";   
// 設(shè)置對(duì)齊方式，start、end、right、center
ctx.textAlign = "left";  
// 設(shè)置填充顏色  
ctx.fillStyle = "#008600"; 
//設(shè)置垂直對(duì)齊方式，top、hanging、middle、alphabetic、ideographic、bottom
ctx.textBaseline = top;

我們還可以計(jì)算字體寬度(px)：

var name = 'aaa';
ctx.measureText(name);

measureText() 方法返回包含一個(gè)對(duì)象，該對(duì)象包含以像素計(jì)的指定字體寬度。

ctx.measureText(name).width

（4）繪制路徑

beginPath()方法表示開始繪制路徑，moveTo(x, y)方法設(shè)置線段的起點(diǎn)，lineTo(x, y)方法設(shè)置線段的終點(diǎn)，stroke()方法用來(lái)給透明的線段著色。

ctx.beginPath(); // 開始路徑繪制  
ctx.moveTo(20, 20); // 設(shè)置路徑起點(diǎn)，坐標(biāo)為(20,20)  
ctx.lineTo(200, 20); // 繪制一條到(200,20)的直線  
ctx.lineWidth = 1.0; // 設(shè)置線寬  
ctx.strokeStyle = '#CC0000'; // 設(shè)置線的顏色  
ctx.stroke(); // 進(jìn)行線的著色，這時(shí)整條線才變得可見

moveTo()和lineTo()方法可以多次使用。

注意：如果使用closePath()方法，會(huì)自動(dòng)繪制一條當(dāng)前點(diǎn)到起點(diǎn)的直線，形成一個(gè)封閉圖形。

fill()和stroke()分別填充當(dāng)前繪圖（路徑）和繪制已定義的路徑。

isPointInPath()

isPointInPath(x,y);

如果指定的點(diǎn)位于當(dāng)前路徑中，isPointInPath() 方法返回 true，否則返回 false。

clip()

clip()方法從原始畫布中剪切任意形狀和尺寸。

注意：一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問畫布上的其他區(qū)域）。您也可以在使用 clip() 方法前通過(guò)使用 save() 方法對(duì)當(dāng)前畫布區(qū)域進(jìn)行保存，并在以后的任意時(shí)間對(duì)其進(jìn)行恢復(fù)（通過(guò) restore() 方法）。

closePath()方法創(chuàng)建當(dāng)前點(diǎn)回到起始點(diǎn)的路徑。

其他樣式屬性：

lineCap	設(shè)置或返回線條的結(jié)束端點(diǎn)樣式，可能值： butt|round|square（平直邊緣|圓形線帽|正方形線帽） 
lineJoin	設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型，可能值：bevel|round|miter（斜角|圓角|尖角（默認(rèn)值））
lineWidth	設(shè)置或返回當(dāng)前的線條寬度。  
miterLimit 正數(shù)，設(shè)置或返回最大斜接長(zhǎng)度。如果斜接長(zhǎng)度超過(guò) miterLimit 的值，邊角會(huì)以 lineJoin 的 "bevel" 類型來(lái)顯示。

fillStyle  設(shè)置填充色
strokeStyle  設(shè)置繪制線色

顏色格式：

//可直接用顏色名稱
'red' 'green'
//十六進(jìn)制顏色
'#d9d9d9'
//rgb
rgb(0,0,0)
//rgba
rgba(0,0,0,1)

（5）設(shè)置漸變色

線性漸變

createLinearGradient方法用來(lái)設(shè)置漸變色。

var gradient = ctx.createLinearGradient(0, 0, 0, 160);    
gradient.addColorStop(0, "#BABABA");    
gradient.addColorStop(1, "#636363");

createLinearGradient()方法的參數(shù)是(x1, y1, x2, y2)，其中x1和y1是起點(diǎn)坐標(biāo)，x2和y2是終點(diǎn)坐標(biāo)。通過(guò)不同的坐標(biāo)值，可以生成從上至下、從左到右的漸變等等。

使用方法：

ctx.fillStyle = myGradient;  
ctx.fillRect(10,10,200,100);

環(huán)形漸變

createRadialGradient()方法的參數(shù)是(x0,y0,r0,x1,y1,r1)，其中x0 漸變的開始圓的 x 坐標(biāo)，y0 漸變的開始圓的 y 坐標(biāo)，r0 開始圓的半徑，x1 漸變的結(jié)束圓的 x 坐標(biāo)，y1 漸變的結(jié)束圓的 y 坐標(biāo)，r1 結(jié)束圓的半徑。

var grd=ctx.createRadialGradient(75,50,5,90,60,100);  
grd.addColorStop(0,"red");  
grd.addColorStop(1,"white");   
  
ctx.fillStyle=grd;  
ctx.fillRect(10,10,150,100);

（6）設(shè)置陰影

我們還可以設(shè)置陰影

ctx.shadowOffsetX = 10; // 設(shè)置水平位移  
ctx.shadowOffsetY = 10; // 設(shè)置垂直位移  
ctx.shadowBlur = 5; // 設(shè)置模糊度  
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 設(shè)置陰影顏色   

ctx.fillStyle = "#CC0000";   
ctx.fillRect(10,10,200,100);

（7）合成

globalAlpha 屬性設(shè)置或返回繪圖的當(dāng)前透明值（alpha 或 transparency）。

globalAlpha 屬性值必須是介于 0.0（完全透明） 與 1.0（不透明） 之間的數(shù)字。

ctx.globalAlpha = number

globalCompositeOperation屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有的）的圖像上。

源圖像 = 您打算放置到畫布上的繪圖。

目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。

source-over	默認(rèn)。在目標(biāo)圖像上顯示源圖像。  
source-atop	在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。  
source-in	在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像之內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。  
source-out	在目標(biāo)圖像之外顯示源圖像。只有目標(biāo)圖像之外的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。  
destination-over	在源圖像上顯示目標(biāo)圖像。  
destination-atop	在源圖像頂部顯示目標(biāo)圖像。目標(biāo)圖像位于源圖像之外的部分是不可見的。  
destination-in	在源圖像中顯示目標(biāo)圖像。只有源圖像之內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。  
destination-out	在源圖像之外顯示目標(biāo)圖像。只有源圖像之外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。  
lighter	顯示源圖像 + 目標(biāo)圖像。  
copy	顯示源圖像。忽略目標(biāo)圖像。  
xor	使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。

2.2 繪制圖像

Canvas API 允許將圖像文件插入畫布。

我們可以使用Image對(duì)象來(lái)加載圖片，然后繪制：

var image = new Image();
image.onload = function(){
    ctx.drawImage(image,0,0);
};
image.src='new.jpg';

drawImage方法

drawImage(img,x,y)

drawImage(img,x,y,width,height)

drawImage(img,sx,sy,switch,sheight,x,y,width,height)

參數(shù)：

img 規(guī)定要使用的圖像、畫布或視頻；sx 可選，開始剪切的 x 坐標(biāo)位置；sy 可選，開始剪切的 y 坐標(biāo)位置；swidth 可選，被剪切圖像的寬度；sheight 可選，被剪切圖像的高度；x 表示在畫布上放置圖像的 x 坐標(biāo)位置；y 在畫布上放置圖像的 y 坐標(biāo)位置；width 可選，表示要使用的圖像的寬度（伸展或縮小圖像）；height 可選，表示要使用的圖像的高度（伸展或縮小圖像）。

圖像平鋪

createPattern(image,type)

參數(shù)：

 type: no-repeat:不平鋪 ；repeat-x:橫方向平鋪；repeat-y:縱方向平鋪；repeat:全方向平鋪

2.3 像素處理

通過(guò)getImageData方法和putImageData方法，可以處理每個(gè)像素，進(jìn)而操作圖像內(nèi)容。

getImageData()方法可以用來(lái)讀取Canvas的內(nèi)容，返回一個(gè)對(duì)象，包含了每個(gè)像素的信息。

var imageData = ctx.getImageData(x,y,w,h)

參數(shù)：x是canvas的X軸坐標(biāo)，y是canvas的Y軸坐標(biāo)，w是寬度，h是高度。

getImageData()方法返回一個(gè)像素顏色數(shù)組（該數(shù)組的長(zhǎng)度等于圖像的像素寬度*圖像的像素高度*4，每個(gè)值的范圍是0-255，可讀寫），imageData的屬性data就是指向它，順序是所取像素范圍的從左到右，從上到下，數(shù)組的元素是（所有圖形，包括圖片，和繪制的圖形）每個(gè)像素的rgba  :

[r1,g1,b1,a1,r2,g2,b2,a2...]

putImageData()方法可將數(shù)組內(nèi)容重新繪制到Canvas上。

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

參數(shù)：imgData 規(guī)定要放回畫布的 ImageData 對(duì)象；x 是ImageData 對(duì)象左上角的 x 坐標(biāo)，以像素計(jì)；y 是ImageData 對(duì)象左上角的 y 坐標(biāo)，以像素計(jì)；dirtyX 可選，水平值（x），以像素計(jì)，在畫布上放置圖像的位置；dirtyY 可選，垂直值（y），以像素計(jì)，在畫布上放置圖像的位置；dirtyWidth 可選，在畫布上繪制圖像所使用的寬度；dirtyHeight 可選，在畫布上繪制圖像所使用的高度。

當(dāng)然，我們也可以創(chuàng)建一個(gè)空白的ImageData對(duì)象。

var imgData=context.createImageData(width,height);

也可創(chuàng)建與指定的另一個(gè)ImageData對(duì)象尺寸相同的新ImageData對(duì)象（其不會(huì)復(fù)制圖像數(shù)據(jù)）：

var imgData=context.createImageData(imageData);

ImageData對(duì)象有data屬性，它包含 color/alpha 信息的數(shù)組。

2.4 保存與恢復(fù)

save()方法用于保存上下文環(huán)境，restore()方法用于恢復(fù)到上一次保存的上下文環(huán)境。

2.5 保存圖像

我們可以使用toDataURL()方法將Canvas數(shù)據(jù)重新轉(zhuǎn)化成圖像文件形式：

canvas.toDataURL('image/png')

上面的代碼將Canvas數(shù)據(jù)，轉(zhuǎn)化成PNG data URI。

2.6 轉(zhuǎn)換

（1）scale()

scale() 方法縮放當(dāng)前繪圖至更大或更小。

scale(scalewidth,scaleheight)

參數(shù)：scalewidth 縮放當(dāng)前繪圖的寬度；scaleheight 縮放當(dāng)前繪圖的高度。

注意：如果您對(duì)繪圖進(jìn)行縮放，所有之后的繪圖也會(huì)被縮放。定位也會(huì)被縮放。如果您 scale(2,2)，那么繪圖將定位于距離畫布左上角兩倍遠(yuǎn)的位置。

（2）rotate()

rotate() 方法旋轉(zhuǎn)當(dāng)前的繪圖。

rotate(angle)

參數(shù)：angle 旋轉(zhuǎn)角度，以弧度計(jì)。

注意：旋轉(zhuǎn)只會(huì)影響到旋轉(zhuǎn)完成后的繪圖。

（3）translate()

translate() 方法重新映射畫布上的 (0,0) 位置。

translate(x,y)

參數(shù)：x 添加到水平坐標(biāo)（x）上的值；y 添加到垂直坐標(biāo)（y）上的值。

（4）transform()

transform(a,b,c,d,e,f)

參數(shù)：a 水平縮放繪圖，b 水平傾斜繪圖，c 垂直傾斜繪圖，d 垂直縮放繪圖，e 水平移動(dòng)繪圖，f 垂直移動(dòng)繪圖。

（5）setTransform()

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

setTransform(a,b,c,d,e,f)

參數(shù)：a 水平縮放繪圖，b 水平傾斜繪圖，c 垂直傾斜繪圖，d 垂直縮放繪圖，e 水平移動(dòng)繪圖，f 垂直移動(dòng)繪圖。

注意：該變換只會(huì)影響 setTransform() 方法調(diào)用之后的繪圖。

2.7 動(dòng)畫

我們可以使用setInterval()和setTimeout()來(lái)產(chǎn)生動(dòng)畫效果。

還可以使用requestAnimationFrame()來(lái)制作動(dòng)畫。

requestAnimationFrame()函數(shù)是全局函數(shù)。

考慮兼容，如下：

var requestAnimFrame = function() {   
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {window.setTimeout(a, 1e3 / 60, (new Date).getTime())};   
}();

使用方法：

function step(){
  requestAnimationFrame(step);
}

requestAnimationFrame()方法會(huì)返回一個(gè)requestID，是一個(gè)長(zhǎng)整型非零值，作為一個(gè)唯一的標(biāo)識(shí)符，可將該值作為參數(shù)傳遞給window.cancelAnimationFrame()來(lái)取消這個(gè)函數(shù)。

cancelAnimationFrame(requestID);

兼容性代碼：

var cancelAnimFrame = function() {   
  return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id); }; 
}();

三、SVG：可伸縮的矢量圖形

SVG是一種用于描述圖形的XML語(yǔ)法。由于結(jié)構(gòu)是XML格式，使得它可以插入HTML文檔，成為DOM的一部分，然后用JavaScript和CSS進(jìn)行操作。

一個(gè)簡(jiǎn)單的SVG文件如下：

<svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">
  <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>
</svg>

要使用SVG有很多方法，最簡(jiǎn)單的就是直接將SVG代碼嵌入到HTML中：

<body>
  <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">     <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>   
  </svg>
</body>

SVG代碼也可以單獨(dú)寫在一個(gè)文件中，后綴是“.svg”，然后用在<img>、<object>、<embed>、<iframe>等標(biāo)簽，以及CSS的background-image屬性，將這個(gè)文件插入網(wǎng)頁(yè)。

<img src="example.svg">

<object data="example.svg" type="image/svg+xml"></object>

<embed src="example.svg" type="image/svg+xml">

<iframe src="example.svg"></iframe>