畫布導向的背景圖片

Eric Bidelman
Twitter GitHub 首頁

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

使用者為背景圖片建立動畫的主要方式有兩種：

  1. 使用 CSS Sprite 更新 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 畫布做為背景

使用 Canvas 做為背景示範
展示模式

後來，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 環境。只要使用「experimental-webgl」取代「2d」，即可。

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

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

其他方法

值得一提的是，Mozilla 的 -moz-element() (MDN) 已有一段時間。這是 CSS 圖片值和已取代內容模組第 4 級規格的部分內容，可讓您使用任意 HTML (影片、畫布、DOM 內容) 和自行命名的圖片。但是，有安全方面的疑慮，是指對 DOM 快照圖片的完整存取權。這主要是其他瀏覽器尚未採用上述功能的原因。