❗ 本文最后更新于 3164 天前,文中所描述的信息可能已发生改变,请谨慎使用。
最近 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,具体什么原因就不得而知了。
本文链接:https://imququ.com/post/use-canvas-as-background-image.html,参与评论 »
--EOF--
发表于 2013-08-18 21:03:36,并被添加「Canvas、CSS、Mozilla、Webkit」标签,最后修改于 2016-03-10 10:00:49。查看本文 Markdown 版本 »
专题「JavaScript 漫谈」的其他文章 »
- 改进 ThinkJS 的异步编程方式 (May 15, 2015)
- BOM 和 JavaScript 中的 trim (Dec 07, 2013)
- AMD 的 CommonJS wrapping (Dec 05, 2013)
- FileSystem API 实现文件下载器 2 (Oct 01, 2013)
- 用 FileSystem API 实现文件下载器 (Oct 01, 2013)
- ES6 中的 Set、Map 和 WeakMap (Sep 23, 2013)
- ES6 中的生成器函数介绍 (Sep 20, 2013)
- 尝试 ES6 中的箭头函数 (Sep 11, 2013)
- 异步编程:When.js快速上手 (Jun 23, 2013)
- JavaScript动画漫谈 (Nov 15, 2012)
Comments
Waline 评论加载中...