Canvas 2D:新的 Path2D 物件與點擊區域

如果你是遊戲開發者,也看過《Firefox OS 適用的 WebGL 與 CreateJS》一文,那你一定還對所提過 Canvas 設計出來的跳跳兔有印象吧?快來看看 Canvas 2D 現在又有哪些新東西了呢?

 


 

 

Adobe Web 平台團隊的協助之下,Firefox 及其他新款瀏覽器均已於去年內建了多項 HTML 的 Canvas 2D 新功能。而 MDN 上有關 Canvas 2D 的相關說明文章也大幅更新,以確實反應出目前 Canvas 標準與瀏覽器的建構實例狀態。就先來看看有哪些新功能,又可如何協助你強化 Canvas 圖形與遊戲內容。

Path2D 物件

新的 Path2D API (從 Firefox 31 起可用) 可儲存路徑,亦即能簡化 Canvas 繪圖碼並達到更快的執行速度。而建構子 (Constructor) 則有 3 種方式可建立 Path2D 物件:

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

第三個版本會將 SVG 路徑資料納入建構,且特別方便好用。你現在也可重複使用自己 SVG 路徑,直接在 Canvas 描繪相同的輪廓:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

在建構空白的路徑物件時,則可使用一般常見的路徑函式,就像在 CanvasRenderingContext2D 裡的使用方式。

// create a circle
var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2 * Math.PI);
// stroke the circle onto the context ctx
ctx.stroke(circle);

為了要實際在 Canvas 上繪製路徑,現已更新多組內容的 API,可傳入 Path2D 路徑:

點擊區域 (Hit regions)

從 Firefox 32 開始就支援實驗性的「點擊區域」功能。你必須先將 canvas.hitregions.enabled 設定為 true 才能測試。如果滑鼠游標處於特定區域,而不須手動檢查其座標 (這樣真的很難檢查複雜的外型),就能透過點擊區域輕鬆偵測。而 Hit Region API 很簡單:

addHitRegion 函式同樣可將點擊區域添加至現有路徑或 Path2D 路徑上。另可透過 region 屬性擴充 MouseEvent 介面,檢查滑鼠游標是否點擊到該區域。

可實際參閱 MDN 上的範例程式碼 (並至少要啟用 Firefox 與 Chrome 中的設定)。

焦點環 (Focus rings)

在 Firefox 32 中的 drawFocusIfNeeded(element) 屬性,同樣不需切換設定就能使用。只要其 <canvas></canvas> 元素內部既有的應變 (Fallback) 元素取得焦點,此 API 就能讓你在 Canvas 上繪製焦點環。在應變元素取得焦點 (例如按「Tab」切換到有 Canvas 的頁面),則 Canvas 上該元素焦點環以指出目前的焦點。

CSS/SVG 濾鏡已可用於 Canvas

同樣必須完成設定 (canvas.filters.enabled),且尚未納入最新的 Canvas 規格 (未來就會加入),但 Firefox 35 已支援了 Canvas 繪圖內容上的濾鏡 (Filter)。其語法即與 CSS 的濾鏡屬性相同。

其他

說明文章

如果想進一步了解 Canvas 2D,亦可參閱 MDN 的 Canvas 線上教學Canvas API。你也可以將 CanvasRenderingContext2D 介面加入書籤,可供你在使用 Canvas 隨時參照。

 

 

原文連結:Canvas 2D: New docs, Path2D objects, hit regions

 

 

0 則回應

Yahoo一紙荒唐合約 讓Mozilla Firefox每年爽拿3.75億美金 Yahoo一紙荒唐合約 讓Mozilla Firefox每年爽拿3.75億美金 11 天前
被一腳踢開但卻還要乖乖付錢, Oath 、 Mozilla 因 Firefox 預設搜尋引擎轉回 Google 而對簿公堂 被一腳踢開但卻還要乖乖付錢, Oath 、 Mozilla 因 Firefox 預設搜尋引擎轉回 Google 而對簿公堂 12 天前
網站被駭留記錄 Firefox給你貼心小提醒 網站被駭留記錄 Firefox給你貼心小提醒 24 天前
Google再次成為Firefox新版瀏覽器默認搜索引擎 Google再次成為Firefox新版瀏覽器默認搜索引擎 1 個月前
新版Firefox預設搜尋引擎恢復與Google合作 新版Firefox預設搜尋引擎恢復與Google合作 1 個月前
新版Firefox瀏覽器正式導入量子引擎 新版Firefox瀏覽器正式導入量子引擎 1 個月前

熱門文章

最新消息