畫海葵的代碼:

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循環(huán)前后加上兩個API——ctx2.save();和ctx2.restore();這一對API是什么用處呢？
?? ??? ??? ?意思就是告訴畫布，告訴場景，在這兩個API之間的樣式定義只在這兩個API之間起作用。
?? ??? ??? ?一旦出去這個restore呢，其他的樣式還是會被恢復的，

2，ctx2.globalAlpha=0.6;定義?？耐该鞫取?/p>

3，ctx2.lineWidth=20;定義?？膶挾取?/p>

4，ctx2.lineCap="round";就是畫完?？Y(jié)尾是一個圓帽狀的結(jié)尾。

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]);繪制到什么地方結(jié)束，就是繪制到這個坐標處結(jié)束，

????????這個坐標是(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循環(huán)外面的意思是這樣的：因為這4個定義的都是?？姆菍嵸|(zhì)屬性，就是沒有這4行，也能繪制?？?，只是繪制出的海葵，沒有透明度，沒有寬度，尾部不是圓形的，顏色不是暗粉色的，也就是說：沒有必要每次執(zhí)行for循環(huán)的時候去執(zhí)行這4條代碼，這就精簡了代碼量，提高了效率。

??????

????

???????