画布驱动的背景图片

以编程方式为背景图片添加动画效果

人们主要通过以下两种方式为背景图片添加动画效果：

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

这两种方法效率都很低，无法满足始终流畅的 60fps Web 应用的要求。

使用 2D 画布作为背景

将画布用作背景的演示
演示

事实证明，WebKit 多年来一直有一个非标准 API，可以将画布作为背景的来源。不过遗憾的是，此功能没有已发布的规范。

首先，不要为背面指定网址：

.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 与 canvas 元素之间的关联就会保留。无需摆弄 DOM。

Chrome 中的演示未显示动画效果？

Chrome 的当前稳定版（版本 23）存在 crbug.com/161699，该 bug 会阻止 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 图片值和替换内容模块级别 4 规范的一部分，可让您创建由任意 HTML 生成的图片：视频、画布、DOM 内容…应有尽有。不过，完全访问 DOM 的快照映像存在安全隐患。这主要是其他浏览器未采用该功能的原因。