1回答

• 

  java家洼

  2016-06-23 00:21:58

  画海葵的代码:

  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条代码，这就精简了代码量，提高了效率。

        
  

      
  

         

  0 0