canvas初学之——绘制一片星空

                                       利用canvas画一片星空

 

效果图如下：

 

   

观察这篇星空：
    多一半的位置被随机分布的星星所覆盖，右上角有一轮月牙，背景色为深蓝色到黑色的渐变色，下方是一片波浪形绿地，绿地颜色也为渐变色。

1.首先，如何绘制渐变色？
   已知可以绘制的渐变色有两种情况，径向渐变(Radial Gradient)和线性渐变(Linear Gradient)。

                                                              径向渐变与线性渐变效果如图：

 

 

第一张图为线性渐变，第二张图为径向渐变

·线性渐变Linear Gradient
            eg:var grd = cxt.createLinearGradient(xstart,ystart,xend,yend);
                //构成渐变线，得到渐变线的方向和尺度
               grd.addColorStop(stop,color);
                stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
                color 在结束位置显示的 CSS 颜色值     

    上图中线性渐变代码如下：

 

			var linearGrad = context1.createLinearGradient(0,0,800,800);
			linearGrad.addColorStop(0.0, '#fff');
			linearGrad.addColorStop(0.3, 'yellow');
			linearGrad.addColorStop(0.6, '#e89abe');
			linearGrad.addColorStop(1.0, 'blue');
			context1.fillStyle = linearGrad;
			context1.fillRect(0,0,800,800);

在0.0-1.0种用了4种颜色，这4种颜色 呈线性渐变

 

 ·径向渐变Radial Gradient
            呈放射状渐变，定义在两个同心圆，而非两点  
            eg:var grd = cxt.createRadialGradient(x0,y0,r0,x1,y1,r1);
               grd.addColorStop(stop,color);

 

上图中径向渐变代码如下：

var radialGrad = context2.createRadialGradient(400,400,0,400,400,500);
			radialGrad.addColorStop(0.0, '#fff');
			radialGrad.addColorStop(0.3, 'ye