畫布導向的背景圖片

Eric Bidelman

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

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

  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 快照圖片的完整存取權。這主要是其他瀏覽器尚未採用上述功能的原因。