背景画像をプログラムでアニメーション化する
背景画像をアニメーション化する主な方法は 2 つあります。
- CSS スプライトを使用して、JS で
background-positionを更新します。 .toDataURL()を使用したハッキング。
最初の方法は、事前に画像を用意できる場合は有効ですが、ソースをプログラムで生成する必要がある場合（たとえば <canvas> で生成する場合）はどうすればよいでしょうか。1 の解決策は、キャンバスで .toDataURL() を使用し、生成された URL を背景に設定することです。
while(1) {
var url = canvas.toDataURL('image/jpeg');
el.style.background = 'url(' + url + ')';
}
この方法には 2 つの問題があります。
data:URL を使用すると、生成される画像のサイズが約 33% 増加します。- DOM の操作が大量に行われている（
el.style）。
どちらの方法も効率が悪く、常に 60 fps の滑らかなウェブアプリには適していません。
2D キャンバスを背景として使用する
実は、WebKit には 長年存在している非標準の API があり、キャンバスを背景のソースとして使用できます。残念ながら、この機能に関する公開されている仕様はありません。
まず、back の URL を指定する代わりに、
.bg {
background: url(bg.png) no-repeat 50% 50%;
}
-webkit-canvas() を使用して、文字列識別子をキャンバス コンテキストに参照します。
.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 を含む概念実証は、こちらをご覧ください。デモ
その他のアプローチ
Mozilla はかなり前から -moz-element()（MDN）を導入しています。これは CSS Image Values and Replaced Content Module Level 4 仕様の一部であり、任意の HTML（動画、キャンバス、DOM コンテンツなど）から生成された画像を作成できます。ただし、DOM のスナップショット イメージへのフルアクセスにはセキュリティ上の懸念があります。これが、他のブラウザがこの機能を導入していない主な理由です。