画海葵的代码:

aneObj.prototype.draw=function()

{

    ctx2.save();
    ctx2.globalAlpha=0.6;
    ctx2.lineWidth=20;
    ctx2.lineCap="round";
    ctx2.strokeStyle="#3b154e";
    for(var i=0;i<this.num;i++)

    {

            ctx2.beginPath();

            ctx2.moveTo(this.x[i],canHeight);

            ctx2.lineTo(this.x[i],canHeight-this.len[i]);

            ctx2.stroke();

   }
    ctx2.restore();
}

代码的解释：

1，在for循环前后加上两个API——ctx2.save();和ctx2.restore();这一对API是什么用处呢？
            意思就是告诉画布，告诉场景，在这两个API之间的样式定义只在这两个API之间起作用。
            一旦出去这个restore呢，其他的样式还是会被恢复的，

2，ctx2.globalAlpha=0.6;定义海葵的透明度。

3，ctx2.lineWidth=20;定义海葵的宽度。

4，ctx2.lineCap="round";就是画完海葵，结尾是一个圆帽状的结尾。

5，ctx2.strokeStyle="#3b154e";设置海葵的颜色，暗粉色。

6， ctx2.beginPath();告诉ctx2要开始绘制一个路径了。其中ctx2就是画笔，也就是场景。

7，ctx2.moveTo(this.x[i],canHeight);从(this.x[i],canHeight)这个坐标开始绘制海葵。其中this.x[i]是x轴坐标，

        canHeight是y轴坐标。

8， ctx2.lineTo(this.x[i],canHeight-this.len[i]);绘制到什么地方结束，就是绘制到这个坐标处结束，

        这个坐标是(this.x[i],canHeight-this.len[i])，其中this.x[i]是x轴坐标， canHeight-this.len[i]是y轴坐标。

9，ctx2.stroke();绘制海葵的动作。前面定义的都是画海葵的位置、颜色、宽度。形状。这一句是真正开始画了。

10，ctx2.globalAlpha=0.6;
    ctx2.lineWidth=20;
    ctx2.lineCap="round";
    ctx2.strokeStyle="#3b154e";这4行代码放在for循环外面的意思是这样的：因为这4个定义的都是海葵的非实质属性，就是没有这4行，也能绘制海葵，只是绘制出的海葵，没有透明度，没有宽度，尾部不是圆形的，颜色不是暗粉色的，也就是说：没有必要每次执行for循环的时候去执行这4条代码，这就精简了代码量，提高了效率。