使用Canvas绘制背景图

原文 http://www.imququ.com/post/use-canvas-as-background-image.html

最近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提出了一个自己的实现方案：-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，具体什么原因就不得而知了。