canvas之图形的组合和设置阴影

图形组合（globalCompositeOperation）

图形的组合是指： 两个图形有重叠的部分，可以取不同的组合的图形。用globalCompositeOperation=’'属性设置。该属性的取值如下

• source-over :默认值，表示新图覆盖于旧图之上。
• source-atop: 只绘制旧图喝重叠部分，其他部分透明。
• source-in :只绘制新图的重叠部分，其他部分透明
• source-out:只绘制新图，重叠部分和旧图透明
• destination-over:表示旧图覆盖再新图之上
• destination-atop:只绘制新图和重叠部分，其他部分透明
• destination-in：只绘制旧图重叠部分，其他透明
• destination-out：只绘制旧图，重叠部分和新图透明

下面贴出代码：

var cas = document.getElementById('cvs');
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

    //绘制第一个圆形
   pencil.beginPath();
   pencil.arc(200,200, 80,2*Math.PI,false);
   pencil.fillStyle="blue";
   pencil.fill();

   //设置图形的组合样式。 注意** 一定是再两个组合图形的中间设置
   pencil.globalCompositeOperation='destination-atop';

    //绘制第二个圆形
   pencil.beginPath();
   pencil.arc(240,200, 80,2*Math.PI,false);
   pencil.fillStyle='yellow';
   pencil.fill();

设置阴影（shadowColor）

  //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

   pencil.beginPath();

   //开始设置图形的阴影
    //设置阴影颜色
   pencil.shadowColor='#999';
   //阴影的模糊度  数值越大，越模糊
   pencil.shadowBlur=3;
   //设置阴影偏移原型的X Y的偏移量
    pencil.shadowOffsetX=20;
   pencil.shadowOffsetY=20;
   pencil.arc(200,200, 80,2*Math.PI,false);
   pencil.fillStyle="blue";
   pencil.fill();

效果展示