這裡定義了兩個函數 drawBowtie 與 dot，且各被呼叫四次。每次呼叫前 translate() 與 rotate() 被用來設立 current transformation matrix（目前轉換矩陣）以定位中心點和蝴蝶結。dot 繪製一個中心在 (0, 0) 的黑方形。這個點用轉換矩陣來移位。drawBowtie 用收到的填滿樣式繪製一個蝴蝶結。

因為矩陣運算會累積，每一段 save() 和 restore() 被用來返回到原來的 canvas 狀態。需注意的一點的是轉動永遠是繞著目前的原點，因此 translate() rotate() translate() 的呼叫的結果會與 translate() translate() rotate() 一串的有所不同。

與 Apple <canvas> 的相容性

<canvas> 的實作大致上與 Apple 的相容。不過有些小地方需要注意一下。

要求的 </canvas> 標籤

<canvas> 在 Apple Safari 的實作裡與 <img> 相似，不需要結束標籤。但是要讓 <canvas> 在網路上能有更廣泛的用途，必須要有備用環境（fallback content）的機制。因此 Mozilla 的實作有要求結束標籤。

如果不需要備用環境，簡單的 <canvas ...></canvas> 會與 Safari 和 Mozilla 完全相容 — Safari 會忽略那個結束標籤。

若是有備用環境，則必須要用到一些 CSS 技巧讓備用環境不會在 Safari 裡出現，但會出現在 Internet Explorer 裡。

其它的功能 把網頁內容畫到 Canvas 內

Mozilla 的 canvas 有用 drawWindow 延伸。這個函數把一個 DOM 視窗內容的快照的畫入 canvas 內。舉例來說

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");

會把目前視窗的內容中，相對於檢視區左上角的 rectangle (0,0,100,200) 的部份，用黑色背景畫到 canvas 內。顏色設定如用 "rgba(0,0,0,0)" 會使內容有透明背景（但會較慢）。

有了這個方法，我們可以做一個隱藏式的 iframe，放入任何內容，然後畫到 canvas 中。這圖片會照目前的轉換（transformation）來縮放與轉動等。

參見

[[Category:{{{5}}}|C用 Canvas 畫圖]]

[[Category:{{{6}}}|C用 Canvas 畫圖]]

返回上一頁: 技術傳教專案主頁