Html5---鸟巢

       由于昨天晚上陪老婆看房子去了，就没有写，今天一定补上。

       这次我们来利用CanvasRenderingContext2D的一些API一个鸟巢。涉及的知识点和技艺包括：三次贝赛尔曲线的绘制，CanvasRenderingContext2D的translate和rotate 等api.

 

第一步：椭圆绘制：

    在CanvasRenderingContext2D开放的一些曲线绘制API当中，有绘制线段、矩形和圆形的，没有绘制椭圆的，所以需要自己去封装一个绘制椭圆的方法，如：

 

  function drawEllipse(x, y, w, h) {
            //您的代码
        }

 

  其中，x,y为椭圆的左上角的坐标（不是中心坐标），w和y分别为长轴和短轴。在实现这个方法之前，很容易就可以想到以下面几种预选方案：

A，根据椭圆笛卡儿坐标第方程绘制；

B，根据椭圆极坐标方程绘制；

C，利用四条贝赛尔曲线绘制。

第一种和第二种方式都是基于点的，以不断地连接椭圆上的所有点来拟合一个完整的椭圆，这样会带来大量的计算和重复调用CanvasRenderingContext2D的API。在Canvas性能优化中很重要的一点就是尽量少地调用CanvasRenderingContext2D的API.比如下面两份代码的对比，第二段代码的性能远远优于第一段。

代码一：

 for (va