畫布導向的背景圖片

Eric Bidelman

以程式輔助方式為背景圖片製作動畫

使用者為背景圖片製作動畫時，主要有兩種方法：

1. 使用 CSS 圖像集更新 JS 中的 background-position。
2. 使用 .toDataURL() 進行駭客攻擊。

如果您事先有圖片，第一個方法就很實用，但如果來源需要透過程式輔助方式產生 (例如透過 <canvas>)，該怎麼辦？解決方法 1：在畫布上使用 .toDataURL()，並將背景設為產生的網址：

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

這有兩個問題：

1. data: 網址會為產生的圖片增加約 33% 的大小開銷。
2. 大量的 DOM 觸碰 (el.style)。

這兩種方法都效率不彰，無法讓網頁應用程式一律以 60fps 的流暢速度運作。

使用 2D 畫布做為背景

DEMO

原來 WebKit 多年以來都有一個非標準 API，可將畫布做為背景來源。但很遺憾，這項功能並未發布規格說明。

首先，請不要為返回按鈕指定網址：

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

使用 -webkit-canvas()，將字串 ID 參照至畫布內容：

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

接下來，我們需要使用 .getContext() 的特殊版本建立 2D 內容：

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

注意：此方法位於 document 物件上，而非畫布。第二個引數與 -webkit-canvas() 中使用的名稱相同。

Dave Hyatt 提供的更多資訊：

注意：每個文件的指定全域 ID 只能有一個 CSS 畫布。取得繪圖內容時，您也要指定大小。只要您重複要求相同大小，畫布就不會清除。指定新大小的行為，等同於調整 <canvas> 元素大小時預期的行為，因此會清除畫布緩衝區。

注意：觀察同名 CSS 畫布的所有物件都會共用該畫布。這表示您可以製作動畫，並讓動畫在畫布上的所有用戶端上同步播放 (類似 GIF 動畫的運作方式)。繪圖變更會自動套用至所有用戶端。

動畫

如示範所示，我們可以重複使用 requestAnimationFrame() 來驅動動畫。這很棒，因為一旦連結，CSS 和畫布元素之間的關聯就會保留。您不必費心處理 DOM。

在 Chrome 中沒有動畫示範？

目前的 Chrome 穩定版 (23 版) 有 crbug.com/161699，這會導致 requestAnimationFrame() 動畫無法正確更新背景。這個問題已在 Chrome 25 版 (目前為 Canary 版) 修正。示範也應能在目前的 Safari 中正常運作。

成效優勢

我們正在討論畫布。硬體加速動畫現在已全面上線 (至少適用於支援這項功能的瀏覽器)。在此重申，您不需要從 JS 騷擾 DOM。

使用 WebGL 做為背景

請等一下。這是否表示我們可以使用 WebGL 強化 CSS 背景？當然有！WebGL 只是無框畫的 3D 內容。只要將「experimental-webgl」換成「2d」，即可完成。

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

以下是概念驗證，其中包含使用頂點和片段著色器繪製背景的 div：DEMO

其他方法

值得一提的是，Mozilla 已推出 -moz-element() (MDN) 一段時間了。這是 CSS 圖片值和替換內容模組第 4 級規格的一部分，可讓您建立從任意 HTML 產生的圖片，包括影片、畫布、DOM 內容等。不過，如果要完全存取 DOM 的快照圖片，就會出現安全性問題。這也是其他瀏覽器尚未採用這項功能的主要原因。