Canvas 2D 學習筆記

canvas 元素由HTML 標準定義，W3C 還制定了HTML Canvas 2D Context 標準，該標準 ... 都支援canvas 元素實現3D 繪圖呈現，getContext() 方法允許傳遞一個“webgl” 字串 ... 前言 HTML5的canvas元素就像是網頁上的一塊畫布，利用JavaScript可以在這個元素上繪圖、合成照片，並且透過時間的改變在畫布上繪製不同圖形可以建立動畫...等等，canvas元素最早是由Apple為MacOSXDashboard所提出，目前所有主流瀏覽器都已支援。

canvas元素由HTML標準定義，W3C還制定了HTMLCanvas2DContext標準，該標準規定在canvas元素上繪圖的API，透過API公開的方法和屬性就可以實現繪圖，這個API核心是CanvasRenderingContext2D物件的使用，CanvasRenderingContext2D可以透過表示canvas元素的DOM物件的getContext()方法，並直接把字串“2d”作為唯一的參數傳遞給它而取得。

首先，瞭解一下動畫基本原理，動畫以人類視覺的原理為基礎，如果快速檢視一系列相關的靜態影像，那麼會感覺到這是一個連續的運動。

動畫的基本原理與電影的原理相同，都是利用人類視覺的「視覺殘留」，人眼在某個物像消失後，仍可使該物像在視網膜上滯留0.1~0.4秒左右，電影膠卷以每秒24格畫面勻速轉動，一系列靜態畫面會因視覺殘留作用造成一種連續的視覺印象，產生逼真動畫。

  1基本用法 只有width與height這兩個屬性，這兩個屬性非必須、能透過DOM屬性設定，若沒有設定，預設寬為300px、高為150px，可以用CSS強制設定元素尺寸，當渲染時，影像會縮放以符合元素尺寸。

＊如果繪圖結果看起來有些扭曲，可以試著修改自身的寬高 當沒有套用樣式規定時，會被初始成全透明。

錯誤時回應的替代內容（Fallbackcontent） 因為舊版瀏覽器（特別是IE9以前）都不支援canvas元素，當不支援瀏覽器時會直接忽略，因此在下瀏覽器認識的替代內容則會被瀏覽器解析顯示，所以可以準備一段canvas內容的說明文字或canvas繪圖完成後的靜態圖片： 瀏覽器如果不支援canvas元素，就顯示這行文字 渲染環境（renderingcontext） canvas元素產生一個固定大小的繪圖畫布，這個畫布有一或多個渲染環境，不同環境可能會提供不同型態的渲染方式，例如WebGL使用OpenGLES的3D環境，這裡我們主要討論2D渲染環境，getContext()方法是傳回一個用於在畫布上繪圖的上下文環境，參數contextID指定了想要在畫布上繪製的影像類型，當傳遞字串“2d”意思是進行二維繪圖，就會導致這個方法傳回一個上下文物件CanvasRenderingContext2D物件，該物件定義二維繪圖API： varcanvas=document.getElementById('tutorial'); varctx=canvas.getContext('2d'); 目前最新瀏覽器都支援canvas元素實現3D繪圖呈現，getContext()方法允許傳遞一個“webgl”字串參數傳回一個WebGLRenderingContext物件用於3D繪圖。

一些瀏覽器也可以傳遞自訂的參數值，例如一些版本的FireFox可以傳遞“moz-3d”以及“experimental-webgl”作為參數。

支援性檢查 利用檢查getContext()方法檢查是否支援canvas元素： varcanvas=document.getElementById('tutorial'); if(canvas.getContext){ varctx=canvas.getContext('2d'); //drawingcodehere }else{ //canvas-unsupportedcodehere } 範例：01_基本用法   2實用功能 讓Canvas鋪滿瀏覽器視窗 經常需要將Canvas填滿瀏覽器視窗，需用CSS設定canvas為block： 然後用JavaScript來動態調整畫布長寬及resize： //該函數用來改變畫布大小 functionresizeCanvas(){ varcanvas=document.getElementById('_2DCanvas');//取得canvas canvas.setAttribute('width',window.innerWidth);//改變寬度 canvas.setAttribute('height',window.innerHeight);//改變高度 } //每當視窗改變時也要呼叫resizeCanvas()函數用來改變畫布的大小 window.onresize=resizeCanvas; 禁用選取Canvas 通常還需禁止選取Canvas功能，避免像手機觸控時選取到DOM，而阻礙互動進行： //禁止滑鼠選取DOM元素 document.onselectstart=function(){ returnfalse }; 範例：02_Canvas在專案上的實用功能/01_實用功能 儲存Canvas圖像資料 一般在用戶端預設右鍵另存圖片都是PNG格式，若要傳到伺服端需用canvas.toDataURL()方法取得base64編碼的圖片資料： canvas.toDataURL([type,...]) 第一個參數type控制傳回圖片的類型，例如png、jpg等，預設值為image/png，如果提供的參數值所表示的圖片類型不被支援，那麼會使用預設值，其後可以有很多參數，根據參數type的設定不同，如果該參數是image/jpeg，那第二個參數是0.0~1.0之間的數字，用於定義圖片品質等級。

//影像輸出為base64壓縮字串，預設為image/png vardata=canvas.toDataURL(); //刪除字串前的提示訊息"data:image/png;base64" varbase64=data.subString(22); 範例：02_Canvas在專案上的實用功能/02_輸出圖像資料 傳回圖片base64的編碼資料！ 範例：02_Canvas在專案上的實用功能/03_調整Canvas解析度 調整符合裝置的解析～   3繪製基本圖型 W3C制定的Canvas2DContext標準提供了一組用來在畫布上繪製圖型的API，可用的物件、方法和屬性非常豐富，該標準可以使用濟面描述語言（InterfaceDescriptionLanguage，簡稱IDL）來描述。

了解座標 在開始繪圖之前，我們先了解畫布的座標系，畫布的原點在元素的左上角，水平是x軸、垂直是y軸，沿原點向右、向下是正值，向左向上是負值，與傳統的笛卡爾座標系不同： 矩形（rectangle） 不同於SVG，只支援一種原始圖形，矩形，矩形共有三個繪圖函數： //畫出一個填滿的矩形 fillRect(x,y,width,height) //畫出一個矩形的邊框 strokeRect(x,y,width,height) //清除指定矩形區域內的內容，使其變為全透明 clearRect(x,y,width,height) 這三個函數都接受一樣的參數：x,y代表從原點出發的座標位置，width,height代表矩形的寬高。

範例：03_繪製圖形/01_rect_矩形 路徑（path） 使用路徑畫圖的步驟如下： 先產生路徑 第一部呼叫beginPath()產生一個路徑，路徑會被存在一個次路徑清單中，這些次路徑集合起來就形成一塊圖形，每次呼叫這個方法，次路徑清單就會被重設，然後便能畫另一個新圖形。

＊當目前路徑為空（例如接著呼叫beginPath()完後）或是在一個新畫布上，不論為何，第一個路徑繪圖指令總是moveTo()，因為每當重設路徑後，你幾乎都會需要設定繪圖起始點。

用繪圖指令畫出路徑 呼叫各式方法來實際設定繪圖路徑。

結束路徑 非必要的一步，就是呼叫closePath()。

這個方法會在現在所在點到起始點間畫一條直線以閉合圖形，如果圖形已經閉合或是只含一個點，這個方法不會有任何效果。

＊當呼叫fill()，任何開放的圖形都會自動閉合，所以不需要再呼叫closePath()，但是stroke()並非如此。

一旦路徑產生後便可用筆畫或填滿方式來渲染生成。

//產生一個新路徑，產生後再使用繪圖指令來設定路徑 beginPath() //閉合路徑好讓新的繪圖指令來設定路徑 closePath() 以下是路徑API的繪圖指令： //畫出圖形的邊框 stroke() //填滿路徑內容區域來產生圖形 fill() moveTo()不會畫任何圖形，卻是路徑清單的一部份，作用大概像是把筆從紙上一點提起來，然後放到另一個點，當初始化畫布或是呼叫beginPath()，通常會想要使用moveTo()來指定起始點，也可以用moveTo()畫不連結的路徑： //移動畫筆到指定的(x,y)座標點 moveTo(x,y) 用lineTo()方法畫直線： //從目前繪圖點畫一條直線到指定的(x,y)座標點 lineTo(x,y) 範例：03_繪製圖形/02_line_線 弧形（arc） arc()方法是以一個中心點和半徑來畫圓弧路徑，五個參數分別是：x,y代表圓心座標點；radius代表半徑；startAngle,endAngle代表沿著弧形曲線上的起始點與結束點的弧度；弧度測量是相對於x軸，anticlockwise為true代表逆時針作圖、false代表順時針作圖： arc(x,y,radius,startAngle,endAngle,anticlockwise) arc()方法用的是弧度（radians）而非角度（degrees），如果要在弧度與角度之間換算，可利用以下程式碼： radians=(Math.PI/180)*degrees 範例：03_繪製圖形/03_arc_圓弧 範例：03_繪製圖形/04_arc_圓弧_圓形 範例：03_繪製圖形/05_arc_圓弧_扇形 弧線（arcTo） arcTo()方法使用一個目標點和一個半徑來畫弧線路徑，四個參數分別是：x1,y1定義P1座標；x2,y2定義P2座標；radius代表半徑： arcTo(x1,y1,x2,y2,radius) 增加給路徑的圓弧是具有指定半徑圓的一部份，該圓弧有一個點與目前位置點（start）到P1的線段相切，還有一個點和從P1到P2的線段相切，這兩個切點就是圓弧的起點和終點，圓弧繪製的方向就是連接這兩個點的最短圓弧的方向。

範例：03_繪製圖形/06_arcTo_弧線_圓形 範例：03_繪製圖形/07_arcTo_弧線_圓角矩形 路徑繞排 在建立路徑時，還要注意繪製路徑的方向，路徑方向被稱為「路徑繞排」。

繪圖方法的座標參數的順序確定了繞排方向： 順時鐘路徑為正向繞排 逆時鐘路徑為反相繞排 當路徑相交時，繞排規則十分重要，繞排規則將確定重疊區域的填充規則，Canvas是使用「非零規則（nonZero）」的繞排規則，依靠繞排方向來確定是否填充相交路徑定義的區域，有兩種狀況： 當相交路徑的繞排方向不同時，不填充所定義的區域 當相交路徑的繞排方向相同時，將填充本來不填充的區域 如果影像進行動畫處理或要用在3D物件上的紋理影像發生重疊時，繞排規則會變得非常重要！ 可以使用「計數」方式來確定是否填充，規則如下： 正向繞排路徑將獲得設定值+1 反向繞排路徑將獲得設定值-1 以形狀上閉合區域中的一點為起點，繪製一個從該點向外無限延伸的線條，使用該線條與路徑相交的次數以及這些路徑的組合值來確定填充。

對於非零繞排，如果計數為0，則不填充相交區域，如果計數為其他數，則填充相交區域，組合該線條與路徑相交的次數，如果相交路徑的繞排方式相同，那麼路徑的組合值就是2或-2，不為0，則填充相交區域，不然組合值為0，則不填充相交區域。

範例：03_繪製圖形/08_路徑繞排 範例：03_繪製圖形/09_正弦波和餘弦波 二次貝茲曲線（quadraticcurve）與三次貝茲曲線（beziercurve） 二次與三次貝茲曲線是另一個種可以構成複雜有機圖形的路徑，二次和三次的差別是（貝茲曲線的起點和終點以藍色標示）：二次貝茲曲線只有一個控制點；三次貝茲曲線有兩個控制點。

//從目前起始點畫一條二次貝茲曲線到(x,y)指定的終點 //控制點由(cp1x,cp1y)指定 quadraticCurveTo(cp1x,cp1y,x,y) //從目前起始點畫一條三次貝茲曲線到(x,y)指定的終點 //控制點由(cp1x,cp1y)和(cp2x,cp2y)指定 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) ＊其中比較需要注意的是可以自己定義一個的函數，來執行常重複的繪圖工作，減少程式碼數量與複雜度。

範例：03_繪製圖形/10_quadraticCurveTo_二次貝茲曲線 範例：03_繪製圖形/11_quadraticCurveTo_二次貝茲曲線_圓形 範例：03_繪製圖形/12_bezierCurveTo_三次貝茲曲線 範例：03_繪製圖形/13_bezierCurveTo_三次貝茲曲線_橢圓 範例：03_繪製圖形/14_path_路徑_直線 範例：03_繪製圖形/15_path_路徑_曲線 範例：03_繪製圖形/16_path_路徑_圓角 範例：03_繪製圖形/17_path_路徑_形狀 範例：03_繪製圖形/18_path_路徑_橢圓曲線 Path2D物件（Path2D） Path2D相較於上述物件，是比較新的功能，配合新的Path2DAPI儲存路徑，亦能簡化Canvas繪圖碼並達到更快的執行速度，有三種方式可建立Path2D物件： newPath2D(); //空路徑 newPath2D(path);//複製另一個路徑 newPath2D(d);//複製SVG路徑資料 第三種方式將SVG路徑納入建構，特別方便好用，可以重複使用SVG路徑，直接在Canvas描繪相同的輪廓： varp=newPath2D("M1010h80v80h-80Z"); ＊其中比較需要注意的是可以自己定義一個的函數，來執行常重複的繪圖工作，減少程式碼數量與複雜度。

範例：03_繪製圖形/19_Path2D   4套用樣式 繪製線條和填充實，可以使用strokeStyle與fillStyle屬性來分別指定線條、填充的呈現，屬性值可以是顏色字串（單色）、CanvasGradient物件（漸層色）、CanvasPattern物件（模式），以及基本設定的透明度、陰影，線條則有自己的樣式。

單色（color） 單色也有好幾種寫法： ctx.fillStyle="orange"; ctx.fillStyle="#FFA500"; ctx.fillStyle="rgb(255,165,0)"; ctx.fillStyle="rgba(255,165,0,1)"; 顏色名稱的關鍵字列表（約147色）可從這裡查詢：http://www.colors.commutercreative.com/ 範例：04_套用樣式/01_顏色 透明度（alpha） 透過設定globalAlpha屬性或是以半透明顏色值設定strokeStyle與fillStyle屬性，可以畫半透明的圖形： globalAlpha=transparencyValue 允許值介於0.0（全透明）到1.0（不透明），預設值為1.0。

＊一旦設定後，之後畫布上畫的所有圖形的不透明度都會套用此設定值。

範例：04_套用樣式/02_透明度 漸層色（gradient） 透過設定fillStyle和strokeStyle屬性為canvasGradient漸層物件，可以畫出線性和放射狀的漸層顏色。

線性漸層（linearGradient）： createLinearGradient(x1,y1,x2,y2) //產生線性漸層物件，漸層起點為(x1,y1)，終點為(x2,y2) 放射性漸層（RadialGradient）： createRadialFradient(x1,y1,r1,x2,y2,r2) //產生放射狀漸層物件，第一個圓的圓心在(x1,y1)、半徑為r1，第二個圓的圓心在(x2,y2)、半徑為r2 一旦產生canvasGradient漸層物件，用addColorStop()方法添加顏色： gradient.addColorStop(position,color) 於gradient漸層物件建立一個顏色點，其中color是顏色字串、position介於0.0到1.0之間，定義該顏色在漸層中的相對位置，呼叫這個方法會指定當進行到設定的位置時，漸層需要完全轉變成設定的顏色。

範例：04_套用樣式/03_漸層色 圖樣（patterns） 呼叫createPattern()會產一個可重複的畫布樣式物件，其中image是CanvasImageSource類別物件： createPattern(image,type) //image是CanvasImageSource類別物件，像是HTMLImageElement //Type是字串，定義如何產生樣式，有repeat、repeat-x、repeat-y、no-repeat ＊注意onload事件處理器，這是為了確保影像載入完成後再進行，不像drawImage()方法，呼叫createPattern()方法前影像必須要先載入完成，否則可能圖像的程生會有問題。

範例：04_套用樣式/04_圖樣 陰影（shadow） 要產生陰影只需要四個屬性： shadowOffsetX=float //代表陰影從物件延伸出來的水平距離，預設為0，不受變形矩陣影響 shadowOffsetY=float //代表陰影從物件延伸出來的垂直距離，預設為0，不受變形矩陣影響 shadowBlur=float //代表陰影模糊大小範圍，預設為0，不受變形矩陣影響，不等同於像素值 shadowColor=>color< //CSS顏色值，代表陰影顏色，預設為全透明。

shadowOffsetX和shadowOffsetY會決定陰影延伸大小，若是為正值，則陰影會往右（沿X軸）和往下（沿Y軸）延伸，若是為負值，則會往正值相反方向延伸。

範例：04_套用樣式/05_陰影 線條樣式 有幾種屬性可以設定線條樣式，用lineWidth屬性指定線條寬度粗細，lineCap屬性來指定端點如何繪製，lineJoin屬性指定線條間結合處如何結合： lineWidth=value //設定線條寬度 lineCap=type //設定線條端點的樣式 lineJoin=type //設定線條間接合處的樣式 miterLimit=value //限制當兩條線相交時交接處最大長度；所謂交接處長度(miterlength)是指線條交接處內角頂點到外角頂點的長度 lineWidth屬性決定線條寬度，預設1.0，必須大於0.0，線條寬度的起算點是中央，越寬會越往兩旁各延伸一半的設定寬度，由於繪畫的最小計量單位是像素，所以指定一個浮點數會被重新計算後再應用於繪圖，以效能考慮，不建議使用浮點數作為線條粗細值。

先來了解一下繪圖路徑的產生方式： 第一張紅色區域的邊際正好符合像素間的邊際，所以會產生清晰影像！ 第二張有一條1.0px的直線，不過線條寬度起算點使從繪圖路徑中央開始往兩旁各延伸一半的設定寬度，所以繪圖路徑兩旁的像素格只有一半會被填滿深藍色，另一半則會經由計算填入近似色（淺藍色），結果整個像素格並非全部填入相同顏色，而產生出邊緣較模糊的線條，因此奇數寬度直線會因為繪圖路徑位置關係而比較模糊。

第三張是為了避免模糊，必須精準設定繪圖路徑位置，因此將點往左移動0.5px，就可以得到填滿像素的線。

為了避免模糊，繪圖路徑最好是落在整數座標點上。

雖然處裡2D繪圖縮放有些麻煩，但只要仔細計算像素格和繪圖路徑位置，縱使進行圖像縮放或變形，圖像輸出還是可以保持正確，例如一條寬1.0px的直線，只要位置計算正確，放大兩倍後會變成一條2個像素寬的清晰直線，而且還是會保持正確位置。

lineCap屬性指定線條的端點如何繪製，共有三種合法值，預設為butt： butt 表示線條端點沒有線蓋，端點是平直且和線條方向正交，這條線條在端點之外沒有擴充。

round 表示端點帶有一個半圓形的線蓋，半圓直徑等於線條粗細，餅且線條在端點之外擴充了線條粗細的一半。

square 表示線條帶有一個矩形線蓋，這個值和butt一樣，但線條擴充了自己寬度的一半。

lineJoin屬性決定兩個連接區端（如線條、弧形或曲線）如何連結（對於長度為零，亦即終點和控制點為同一點的圖形無效），共有三個屬性，其中miter為預設值： miter 表示斜交型連接，向外延伸連結區段外緣直到相交於一點，形成菱形區域，而miterLimit屬性會影響miter屬性。

round 代表圓弧形連接樣式。

miter 代表斜面型連接樣式，在連結區段的共同終點處填滿一個三角形區域，將原本的外接角處形成一個切面。

miterLimit屬性決定相交指數，只有在當設定miter時有效，斜面可能太長變得不協調，可以用miterLimit屬性為斜面的長度設定一個上限，這個屬性工作表示斜面長度和線條長度的比值，預設是10，表示一個斜面長度不應該超過寬度的10倍，如果斜面到達這個長度，它就變斜角了！ 範例：04_套用樣式/06_線條樣式   5繪製文字 Canvas提供在畫布上繪製文字，可以將文字繪製成輪廓線條，也可以繪製成填充，除了設定圖形相關屬性（例如顏色、線條粗細、陰影等），還可以定義文字樣式，基本使用為： fillText(text,x,y[,maxWidth]) //設定文字內容和位置 strokeText(text,x,y[,maxWidth]) //設定文字框的內容和位置 另外有三種屬性用來設定文字樣式： 字型（font） 水平對齊方式（textAlign） 基準線對齊方式（textBaseline） 設定字型 font=value 屬於font設定字型，與CSS的font屬性設定相同，但不支援互依性質屬性質，例如inhert、initial，也不支援line-height，如果有這些關鍵字，會自動被忽略： ctx.font='12px/14pxsans-serif'; //定義line-height為14px，但被強制為normal，實際等於'12pxsans-serif' ctx.font='80%sans-serif'; //設定font-size為父元素的80%，會首先計算為像素 ctx.font='x-large"NewCenturySchoolbook",serif'; //設定font-size為x-large也會首先計算為像素、字體為"NewCenturySchoolbook",serif ctx.font='bolditaliclargePalatino,serif'; //設定font-weight為粗體、font-style為斜體、字體為largePalatino,serif ctx.font='normalsmall-caps120%/120%fantasy'; //設定font-variant為小型大寫、font-size為父元素的120%、字體為fantasy 範例：05_繪製文字/01_文字基本繪製 設定文字水平對齊方式 textAlign=value 參數包含start、end、left、right、center，預設為start，textAlign屬性值會牽涉到繪製文字的起始點座標： //以下三種起始點是文字左邊緣，且實際的對齊方式是靠左對齊 textAlign='left'; textAlign='start';//同時文字方向是‘ltr’ textAlign='end';//同時文字方向是‘rtl’ //以下三種起始點是文字右邊緣，且實際的對齊方式是靠右對齊 textAlign='right'; textAlign='start';//同時文字方向是‘rtr’ textAlign='end';//同時文字方向是‘ltr’ //以下三種起始點是文字水平中心，且實際的對齊方式是置中對齊 textAlign='center'; 範例：05_繪製文字/02_基準設定 設定文字水平對齊方式 textBaseline=value 參數包含top、hanging、middle、alphabetic、ideographic、bottom，預設為alphabetic。

最常使用的基準線對齊方式就是alphabetic，就是平常我們用到的baseline，是西歐自行用到的概念，是一個標準，除此之外，常用的垂直對齊為top、middle、bottom。

另外兩種基準線對齊方式，ideographic即表意文字，是CJK字型（中日韓字型）用到的概念；hanging是印度系文字自行用到的概念，字型有點像是懸掛在一個基準線上，藏語字型也是一個hanging字型，處理西歐字型和CJK字型時不會有關。

W3C標準提供了下圖，來說明這幾個基準線的位置，前幾個字元都是西歐文字，中間兩個是CJK文字，最後一個是印度系文字： 設定文字方向 direction=value 參數包含ltr、rtl、inherit，預設為inherit（目前測不出結果）。

測量繪製文字的寬度 varoTextMetrics=ctx.measureText(text); oTextMetrics.width 參數text定義要測量的文字字串，因為繪圖方法沒有提供文字換行功能，因此需要測量文字的寬度來確定換行，進一步將過長的文字繪製在多行上。

範例：05_繪製文字/03_多行設定   6繪製影像 畫布API能接受以下資料型態作為影響來源： HTMLImageElement 用Image()建構成的影像或是元素。

HTMLVideoElement 用HTMLVideoElement元素作影像來源，抓取影片目前的影像畫格當作影像使用。

HTMLCanvasElement 用另一個HTMLCanvasElement元素當影像來源。

ImageBitmap 可以被快速渲染的點陣圖（bitmap），點陣圖能由上述所有來源產生。

還有好幾種方法能夠取得影像用於畫布： 使用同一份網頁上的影像 透過document.images、document.getElementsByTagName()方法、document.getElementById()方法取得影像。

使用來自其他網域的影像 UsingthecrossOriginattributeonan透過的crossOrigin屬性，可以要求從另一個網域載入影像來使用，若是寄存網域（thehostingdomain）准許跨網路存取該影像，那麼便可以使用它而不污染（taint）畫布，反之，使用該影像會污染畫布（taintthecanvas）。

使用其他畫布元素 如同取得其他影像，一樣能用document.getElementsByTagName()或document.getElementById()方法取得其他畫布元素，但是在使用之前請記得來源畫布上已經有繪上圖了。

使用其他畫布元素作為影像來源有很多有用的應用用途，其中之一便是建立第二個小畫布作為另一個大畫布的縮小影像。

創造全新的影像 產生新的HTMLImageElement物件也能當作影像來源，可以用Image()來建構一個新影像元素： varimg=newImage();//產生新img元素 img.src='myImage.png';//設定圖片路徑 在影像載入完成前呼叫drawImage()不會有任何效果，甚至某些瀏覽器還會拋出例外狀況，所以要透過載入事件來避免這類問題： varimg=newImage();//產生新img元素 img.addEventListener("load",function(){ //圖片載入完畢後，再畫圖 },false); img.src='myImage.png';//設定圖片路徑 若是只要載入一份影像，可以用上面的方法，不過當需要載入、追蹤多個影像時，就需要更好的方法了，可以參考JavaScriptImagePreloader。

以data:URL嵌入影像 利用data:url，透過dataURL直接將影像定義成Base64編碼的字串，然後嵌入程式碼之中： varimg_src='data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; dataURL的好處是立即產生影像，不用再和伺服器連線，另一個好處是能夠將影像包入CSS,JavaScript,HTML之中，讓影像更具可攜性；壞處則是影像不會被快取起來，而且對大影像來說編碼後的URL會很長、檔案也會相對比較大一些。

從影片中擷取每一幀 使用