《JavaScript進階程式設計》Chapter 15 canvas + Chapter 16 HTML5

標籤：為什麼   請求   ext   標題   top   ret   利用   不同的   name   

• Chapter 15 Canvas

• Chapter 16 HTML5

Chapter 15 Canvas 

• <canvas>元素：設定地區。JS動態在這個地區中繪製圖形。
• 蘋果公司引導的。由幾組API構成。
• 2D上下文普及了。WebGL（3D上下文）還未足夠普及。

基本用法

• 首先：width、height屬性確定繪圖區域大小。後備資訊放在開始和結束標籤之間。
• getContext()：DOM獲得這個canvas元素對象。再在這個對象上調用getContext()擷取上下文，傳入參數表示擷取的是2d上下文還是WebGL上下文。
• toDataURL()方法，擷取繪圖區域中的圖形對應的URL。注意，若canvas畫布“不乾淨”，即來自不同的域，這個方法會報錯。

2D上下文

• 繪製簡單的2D圖形。
• 座標原點在canvas元素的左上方，原點座標(0,0)
• 填充和描邊：fillStyle和strokeStyle屬性。
  • 描邊寬度由lineWidth屬性控制。
  • lineCap屬性控制線條末端的形狀
  • lineJoin屬性控制線條相交的方式。
• 繪製矩形：fillRect(),strokeRect()方法，clearRect()方法。4個參數：矩形的x,y座標，矩形的寬度和高度。
• 繪製路徑：
  • 開始：beginPath()
  • 一系列繪製方法
  • 結束：closePath()/fill()/stroke()/clip()
  • 是否在路徑上：isPointInPath()
• 繪製文本：
  • fillText()/strokeText()：4個屬性：字串、x、y座標、可選的最大像素寬度
  • 3個屬性：font、textAlign、textBaseline
  • 輔助確定文字大小：measureText()方法，返回TextMetrics對象，只有width屬性。
• 變換：
  • 例如rotate(angle)/scale()/translate()/transform()/setTransform
  • 選項組：save()
  • 返回上一個狀態：restore()
  • 記錄和返回都是以棧結構的方式，可以一級級進入或者返回。
  • 記錄和返回只作用於狀態或者設定。
• 繪製映像（對<img>或者<canvas>映像進行處理）
  • drawImage()：多種控制方式
• 陰影
• 漸層：
  • createLinerGradient()/createRadiaGradient() ,addColorStop()
  • 注意座標匹配。
• 模式（重複的映像）createPattern()
• 使用映像資料（擷取rgba）
  • getImageData()擷取原始映像資料，返回ImageData對象的執行個體。
  • 上述對象擁有width、height、data屬性。
  • data屬性是數組，每四位表示一個像素的資料，對應rgba
  • 可以依次設定灰階過濾器或者其他過濾器。
  • putImageData()將映像資料繪製到畫布上。
• 合成：
  • globalAlpha屬性：通用透明度
  • globalCompositionOperation屬性：合成方式。存在瀏覽器差異。

WebGL

• 類型化數組：視圖--類型化視圖。是WebGL項目的基礎。
• 上下文：pdf P488-497

 

Chapter 16 HTML5 指令碼編程

• HTML5增加了新標籤，同時也花一定篇幅規定了一些JS的API，以簡化複雜的操作。本章介紹了跨文檔資訊傳遞，拖放API，音頻及視頻，曆史狀態管理等一些操作。

跨文檔訊息傳遞（cross-document messaging:XDM)

• 利用postMessage()進行訊息傳遞，postMessage()方法不僅可以在這裡使用，功能就是“向另一個地方傳送資料”。而XDM中，“另一個地方”指另一個域，一般將訊息傳給當前頁面的<iframe>元素或者由當前頁面彈出的視窗。
• 以當前頁面的<iframe>元素包含另一個域為例：
• 當前頁面需要做的：
  • postMessage()傳入兩個參數：待傳入的訊息和訊息的來源域---這就意味著實際上需要獲得“另一個域”的window對象（代理）以在其上使用這個方法。見下個步驟。
  • 可以通過document.getElementById("myframe").contentWindow;即contentWindow屬性擷取目標域的window對象或者代理。調用該方法即可傳入資料。
  • data不一定需要是字串，但非字串的情況在不同瀏覽器之間存在差異。可以利用JSON.stringify()/JSON.parse()處理字串。
  • 這種方法可以確保安全性，畢竟第二個參數是已知地址。
• <iframe>中的域需要做的：
  • 會激發message事件。onmessage處理常式的事件對象event有三個重要屬性。
  • event的三個屬性：data、origin、source
  • 可以在確保origin（來源所在域）合格情況下，處理data，再通過source（指向來源的window對象的代理）向來源發送訊息，即調用：event.source.postMessage().
  • 由於source只是可代理，所以能訪問的屬性和方法有限。建議只是用postMessage()方法。
• 注意到postMessage()方法是在待向其傳送訊息的域的代理對象上調用的。

原生拖放

• 注意到，HTML5提供了一些JS的API，向程式員暴露可以使用的屬性或者方法，它本身更多的是規定瀏覽器在這些方法或者屬性（或者事件）響應的時候提供一些怎樣的顯示效果。
• 拖放一般考慮3個階段：被拖放的對象、拖放過程、放置的目標對象。
• 對應一些拖放事件：對於被拖放的對象，有dragstart/drag/dragend；對於放置的目標對象，有dragenter/dragover/dragleave或drop。很好理解。
• 自訂放置目標：針對有些元素預設是不允許作為放置目標的情況，由於預設是不允許，所以可以在dragenter和dragover中重寫預設行為，即阻止預設行為的發生。以此來自訂放置目標。
• dataTransfer對象，為了在拖放操作時實現資料交換，是event的屬性，用於從被拖放的元素向放置目標元素傳遞字串格式的資料。
  • setData()/getData()方法：設定和擷取資料。getData()在drop事件中處理。注意在跨瀏覽器處理setData()的時候注意對短資料類型和MIME類型的處理。
  • dropEffect/effectAllowed：兩者配合，可以確定被拖放的元素能夠執行哪种放置行為（而瀏覽器會對應給出顯示的效果）。dropEffect在ondragenter事件處理常式中針對放置目標進行設定。而effectAllowed屬性在ondragstart中針對被拖放的目標進行設定。
  • 其他成員：addElement()/clearData()/setDragImage()/types等
• draggable屬性：HTML5中的全域屬性，規定元素是否可以被拖動。

媒體元素

• 針對HTML5中的<audio>和<video>元素。這兩個元素的產生可以讓我們減少使用FLASH外掛程式等，更方便實現跨瀏覽器操作。
• 元素本身就擁有一些屬性，且可以進行多個MIME類型和轉碼器的選擇。
• JS又規定了他倆的一些更加具體和詳細的屬性和事件，以減輕實現一些操作的繁瑣的程式編寫過程。
• 可以依賴play()或pause()實現自訂的媒體播放器，這隻是代碼編寫的邏輯問題，比較簡單。
• JS提供canPlayType()來檢測轉碼器的支援情況
  • 注意到可能性probably>maybe>空值
  • 所以傳入MIME類型和轉碼器的可能性大於只傳入MIME類型的。很好理解。
• JS有原生的Audio建構函式，可以穿件audio執行個體並進行一些操作。

曆史狀態管理

• 針對“後退”和“前進”按鈕失去作用，使得使用者難以在不同的狀態（頁面狀態）間進行切換。可以使用之前（13章）提到過的haschange事件監測狀態的變化，以執行某些處理；或者使用HTML5中的曆史狀態管理API進行操作。
• haschange事件：URL參數列表（包括#後的所有字串）發生變動的時候觸發，主要用在Ajax中，用URL參數數列來儲存狀態或者導航資訊。屬性oldURL、newURL可以實現location.hash的功能。一般使用後者，因為支援oldURL和newURL的瀏覽器不多
• 狀態管理API同樣可以在不載入新頁面的情況下改變瀏覽器的狀態：history.pushState()，傳入3個參數：狀態物件，新狀態標題和可選的URL，注意第二個參數至今不支援，所以可以寫入Null 字元串，而第一個資訊最好詳盡的選項組對象各方面的資訊，以便隨後只用。
• 在執行完這個方法後，新的狀態資訊會被加入曆史狀態棧。並且不會真正的向伺服器發送請求。
• popstate事件：由於上述方法改變了曆史棧，[上一頁] 按鈕可用了。在點擊後退按鈕的時候，觸發popstate事件，其事件對象event包含pushState()第一個參數所指的狀態物件（這就是為什麼上面要求資訊詳盡的原因了）。注意到，瀏覽器載入第一個狀態（頁面）的時候，這個對象為null。
• replaceState()：傳入參數與pushState()的一樣，然而不會在曆史狀態棧中建立新狀態，指揮重寫目前狀態。
• 注意pushState()的第三個參數務必是實際的URL，不然重新整理的時候會導致404錯誤。

 

《JavaScript進階程式設計》Chapter 15 canvas + Chapter 16 HTML5