原文  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,具体什么原因就不得而知了。

使用Canvas绘制背景图的更多相关文章

  1. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  3. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  4. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. canvas 绘制八卦图

    绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...

  6. 使用canvas绘制扇形图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. canvas绘制折线图(仿echarts)

    遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...

  8. canvas 绘制星座图(好玩)--转载

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. v-if VS v-show

    在vue实现轮播图效果 中分别用到 v-if和 v-show 下面讲讲我理解的他们的区别: v-if: 根据表达式的值的真假条件渲染元素.在切换时元素及它的数据绑定 / 组件被销毁并重建.如果元素是 ...

  2. PHP工作笔记:yii2各种功能汇总

    数据库操纵: 基础知识:数据库基础 查询语句: 使用yii migrate管理.生成数据库 Yii2 AR find用法 Yii2.0 对数据库 查询的一些简单的操作 修改语句: Yii 修改数据的两 ...

  3. 一些常用的Bootstrap模板资源站

    2013-11-13 23:28:09   超级Bootstrap模板库:http://www.wrapbootstrap.com/ 免费的HTML5 响应式网页模板:http://html5up.n ...

  4. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

  5. [HTML]表格的一切

    如何设置HTML页面自适应宽度的table(表格): <table width="95%" border="1" cellpadding="2& ...

  6. [转]JDK6和JDK7中的substring()方法

    substring(int beginIndex, int endIndex)在JDK6与JDK7中的实现方式不一样,理解他们的差异有助于更好的使用它们.为了简单起见,下面所说的substring() ...

  7. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.3 Details用户详细信息]

    3.3 Details用户详细信息 用户详细信息是通过objectId获取.代码如下 public async Task<ActionResult> Details(string obje ...

  8. C++重要知识点小结---1

    1.C++中类与结构的唯一区别是:类(class)定义中默认情况下的成员是private的,而结构(struct)定义中默认情况下的成员是public的. 2. ::叫作用域区分符,指明一个函数属于哪 ...

  9. Models——英语学习小技巧之四

    Models  are very important, here model means role model, is kind of like a hero. It's  someone that ...

  10. ovs处理openflow消息的流程

    OVS处理各个openflow消息的详细代码在 ofproto/ofproto.c 中: static enum ofperr handle_openflow__(struct ofconn *ofc ...