《JavaScript高級程序設計》Chapter 15 canvas + Chapter 16 HTML5

• 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，注意第二個參數至今不支持，因此能夠寫入空字符串，而第一個信息最好詳盡的記錄狀態對象各方面的信息，以便隨後只用。
• 在執行完這個方法後，新的狀態信息會被加入歷史狀態棧。而且不會真正的向服務器發送請求。
• popstate事件：因爲上述方法改變了歷史棧，「後退」按鈕可用了。在點擊後退按鈕的時候，觸發popstate事件，其事件對象event包含pushState()第一個參數所指的狀態對象（這就是爲何上面要求信息詳盡的緣由了）。注意到，瀏覽器加載第一個狀態（頁面）的時候，這個對象爲null。
• replaceState()：傳入參數與pushState()的同樣，然而不會在歷史狀態棧中建立新狀態，指揮重寫當前狀態。
• 注意pushState()的第三個參數務必是實際的URL，否則刷新的時候會致使404錯誤。