用HTML5实现无图片的百度Logo

前天用CSS3实现了一次“无图片的百度Logo”，在见证了CSS3的强大之后，突然心血来潮想用HTML5的canvas实现一次。
强大的HTML5，利用canvas可以实现flash级别的绘图效果，而这最重要的是：前端攻城师再也不需要看adobe的眼色了！

/*--------------------------------------------扯谈完毕，现在开始do-------------------------------------------------*/

仍然用之前我在《用CSS3实现无图片的百度Logo》的博文（地址：博文地址）中写到的主体思路。把Logo分为三部分：“Bai”字样、“du”和爪子图案、“百度”字样。其中字体仍然用嵌入第三方字体“百度综艺体”（省时又省心！）。“Bai”字样部分和“百度”字样的大部分代码跟前一篇博文一样。HMTL5的canvas主要用到在画蓝色的“爪子”上。

在这里，我也不啰嗦在网页中使用canvas的一般方法了，如不清楚可以去w3school看一下入门级的介绍。

一、老规矩，先画四个圆圈：
首先获得canvas的2d上下文：var context = canvas.getContext('2d');
后面的图画基本都用到蓝色，所以先设置填充的颜色为蓝色：context.fillStyle = "#2a32df";
然后，画出第一个圆：

//画第一个圆形context.save();context.translate(7, 23);context.scale(0.75, 1);context.beginPath();context.arc(0, 0, 9, 0, Math.PI*2, true);context.closePath();context.fill();context.restore();

基本思想是，用arc函数绘制一个圆形，然后用scale在X轴上压缩，使其变成一个椭圆（这个思想和上一个博文中用CSS3实现是类似的）。非常感谢HTML5的canvas也有像CSS3的translate和transform这样的变换效果。在这里需要注意：scale缩放和rotate旋转都是基于画布上原点（默认是0,0），所以你需要根据图形的中心进行缩放或者旋转的话，就需要先把画布的原点移到图形的重心处。上面代码的“translate(7, 23)”就是这个原因。而在移动原点前，最好先用context.save()把绘图结果保存下来，在绘制结束后在恢复：context.restore()。

第二个圆的画法也一样，只不过为逼近原Logo的效果，第二个圆的宽度要小一点。

//画第二个圆形context.save();context.translate(19, 10);context.scale(0.7, 1);//这里宽度的压缩要更小点context.beginPath();context.arc(0, 0, 9, 0, Math.PI*2, true);context.closePath();context.fill();context.restore();

第三个圆同上，但是会选择一个小小的角度：

//画第三个圆形context.save();context.translate(35, 11);context.rotate(0.3);//旋转一个小小的角度，注意：rotate要放在scale之前context.scale(0.75, 1);context.beginPath();context.arc(0, 0, 9, 0, Math.PI*2, true);context.closePath();context.fill();context.restore();

这里有个奇怪的地方：rotate代码要放在scale代码之前才有效！望广大读者解惑。
第四个圆同上，但是高度会稍微压缩一下：

//画第四个圆形context.save();context.translate(45, 27);context.scale(0.75, 0.96);//高度也需要稍微压缩一下context.beginPath();context.arc(0, 0, 9, 0, Math.PI*2, true);context.closePath();context.fill();context.restore();

二、开始画最复杂的“掌心”部分：
这种不规则图形最麻烦了。如果还用之前《用CSS3实现无图片的百度Logo》试过的那样——多个椭圆层叠出来的方法，未免太麻烦了。还好，HTML5的canvas中有画曲线的方法，我用三次贝塞尔曲线bezierCurveTo函数。
画出封闭的曲线，然后填充颜色即可。（这里比较麻烦的是如何决定各段曲线的起点、终点、控制点的坐标。我用了Ps上的钢笔工具在百度的Logo描线来确定坐标，Ps上的钢笔工具本身就是基于贝塞尔曲线的，这种方法更原图的吻合度很高）

//用贝塞尔曲线画掌心context.save();context.beginPath();context.moveTo(16, 32);context.bezierCurveTo(23, 22, 29, 23, 34, 32);context.bezierCurveTo(38, 36, 39, 39, 43, 41);context.bezierCurveTo(51, 45, 52, 65, 33, 59);context.bezierCurveTo(29, 58, 25, 58, 21, 59);context.bezierCurveTo(2, 65, -3, 46, 8, 40);context.bezierCurveTo(11, 38, 14, 36, 16, 32);context.closePath();context.fill();context.restore();

大功告成！

三、最后来看一下各个浏览器下的效果：
首先是maxthon3下的：

接着是firefox下的：

接着是chrome上的效果：

接着是safari上的效果：

接着是opera上的效果：

最后是在IE9上的效果：

至于IE9以前的版本，无法支持HTML5的canvas，所以无法显示出蓝色“爪子”。百度了一下，现在有办法让以前版本的IE也支持canvas，例如excanvas.js和uuCanvas.js，其基本方法都是通过js调用IE里的vml或者silverlight绘图。不过哥还没验证过效果怎样~


最后，小总结一下：HTML5的canvas真的很强大，这里展示的只是很小的一部分功能，有了canvas能做出很多高级网页绘图效果。不过唯一让我不满意的是：canvas画出来的图形不是矢量图，网页放大看会有锯齿，不知道是W3C有意为之呢，还是别的原因。