提醒：本文最後更新於 1036 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

最近 iCloud Web 的 Beta 版換了 UI，整體風格變得和 iOS7 一致了。首頁圖示下方漂浮著若干大小不一的泡泡，十分夢幻。大家可以訪問 beta.icloud.com 體驗下，如果覺得泡泡不夠多，還可以加上 crazyAwesome 引數讓泡泡變得更加瘋狂。

上面提到的泡泡效果，有許多種實現方案。本文要討論的是 iCloud 使用的 Canvas 繪製背景圖方案。這樣做的好處是，用程式碼繪製背景圖，相比圖片更靈活，也更省流量。另外，不知道大家有沒留意到 iCloud Web 中的日曆圖示是根據當前日期和星期幾動態生成的，下面 Demo 中有這個圖示的實現。

canvas.toDataURL

大家知道，一般我們可以用圖片、SVG 和顏色漸變來做為元素的背景圖（background-image 屬性）。在 Canvas 中，可以通過 toDataURL() 方法，把影象匯出為 data 型別的 URL，這個 URL 可以直接用做背景圖。下面有個簡單的例子：

<div style="width:200px;height:200px;" id="cloud">紅心是我的背景圖！</div>    
<canvas style="display:none;" id="can" width="200" height="200"></canvas
 
>
<script>
(function() {
    var canvas = document.getElementById('can'), context;

    if(!canvas.getContext) {
        alert('你的瀏覽器不支援 canvas!');
        return;
    }

    context = canvas.getContext('2d');
    context.fillStyle = 'red';
    context.beginPath();
    context.moveTo(75,40);
 

    context.bezierCurveTo(75,37,70,25,50,25);
    context.bezierCurveTo(20,25,20,62.5,20,62.5);
    context.bezierCurveTo(20,80,40,102,75,120);
    context.bezierCurveTo(110,102,130,80,130,62.5);
    context.bezierCurveTo(130,62.5,130,25,100,25);
    context.bezierCurveTo(85,25,75,37,75,40);
    context.fill();

    document.getElementById('cloud').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';
})();
</script>

這是使用本方案實現的 iCloud 日曆圖示，支援 Canvas 的瀏覽器都可以正常顯示。

用 Canvas 繪製背景圖，將 Canvas 強大的繪圖能力與靈活的 CSS 背景圖很好的結合起來，強大但不完美。例如多個元素使用同一個 Canvas 背景時，無論是分開設定背景圖，還是建立臨時 Style，都很麻煩。如果想把一個 Canvas 動畫作為元素背景，需要不斷獲取 DataURL 再賦給元素，更加不方便。

有沒有更好的辦法可以把一個或多個 html 元素與 Canvas 繫結起來，在 Canvas 內容改變時自動更新 html 元素呢？答案是肯定的。

-webkit-canvas

注：由於 -webkit-canvas 不是標準的 CSS 屬性，Chrome 已經廢棄了它，Safari 目前還支援。

對於上面的問題，Webkit 提出了一個自己的實現方案：-webkit-canvas。Safari4+、Chrome4+ 的 background-image 都支援這個屬性值（caniuse），可以方便的使用 CSS Canvas 作為元素的背景圖，類似這樣：

#icon1 {
    background-image: -webkit-canvas(identifier);
}

區別於在 Canvas 元素上繪圖，-webkit-canvas 方案需要用下面的方法獲取繪圖的 Context：

var context = document.getCSSCanvasContext("2d", "identifier", width, height);

建立 CSS Canvas 時需要指定一個標識，用它的 html 元素在 CSS 中指定這個標識就可以了。瀏覽器會自動將 CSS Canvas 的改變同步到所有指定了這個標識的元素上，這樣就成功解決了上面提出的問題。

具體效果可以繼續看我寫的 Demo，Webkit Only。這裡還有一個使用 -webkit-canvas 將 Canvas 動畫作為背景圖的例子，請自備梯子檢視。

-moz-element

Mozilla 有個類似的方案，叫 -moz-element。可以指定任何元素作為另外元素的背景圖（實際上，一個元素不能指定父元素作為自己的背景，為什麼自己想），Firefox4+ 開始支援它作為 background-image 的屬性值。下面是它的用法：

<button id='elementID'>this is a element.</button>
<div style='background-image:-moz-element(#elementID);width:300px;height:200px;'></div>

於是，上面的 Demo 在 Firefox 下可以改由 -moz-element 來實現了，點選檢視。由於本方案支援任何元素作為背景，所以也可以這麼玩，純 CSS 的有趣效果，Firefox Only。

最後

個人感覺 Mozilla 的方案略微誇張了點，相比之下 Webkit 的 CSS Canvas 更有可能成為標準。另外，iCloud 對於不支援 -webkit-canvas 的瀏覽器使用的是 DataURL 方案，並沒有使用 firefox 的 -moz-element，具體什麼原因就不得而知了。

--EOF--

發表於 2013-08-18 21:03:36 ，並被新增「 Canvas 、 CSS 、 Mozilla 、 Webkit 」標籤 ，最後修改於 2016-03-10 10:00:49 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 1036 天前，文中所描述的資訊可能已發生改變，請謹慎使用。