用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";
然后，画出第一个圆：

	//画第一个圆形
	con