畫布導向的背景圖片

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

使用者主要有兩種方式可為背景圖片製作動畫：

  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)。

這兩種方法效率都不高，無法讓網頁應用程式維持 60 FPS 的流暢度。

使用 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);

Dave Hyatt 的其他資訊：

動畫

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

Chrome 未顯示動畫示範？

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

成效優勢

我們這裡討論的是畫布。硬體加速動畫現在已全面啟用 (至少在支援這項功能的瀏覽器中是如此)。再次重申，您不需要從 JS 擾亂 DOM。

使用 WebGL 做為背景

等一下，這是否表示我們可以使用 WebGL 驅動 CSS 背景？當然可以！WebGL 只是畫布的 3D 環境。只要將「2d」換成「experimental-webgl」，即可完成。

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

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

其他方法

值得注意的是，Mozilla 已經推出 -moz-element() (MDN) 許久，這是 CSS 圖片值和取代內容模組第 4 級規格的一部分，可讓您從任意 HTML 建立圖片：影片、畫布、DOM 內容等。不過，如果能完整存取 DOM 的快照圖片，可能會造成安全疑慮。這也是其他瀏覽器未採用這項功能的主要原因。