4.5图形组合
绘制阴影：需要多个属性配合完成shadowBlur/shadowOffsetX/shadowOffsetY/

    var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     ctx.save();    // save context object保存上下文对象
     ctx.shadowBlur = 10;             //设置阴影模糊级数
     ctx.shadowOffsetX=20;         //设置阴影与矩形的水平距离
     ctx.shadowOffsetY=20;         //设置阴影与矩形的垂直距离
     ctx.shadowColor = "red";       //设置阴影的颜色
     ctx.fillSytle="Yellow";                   //设置填充的颜色
     ctx.beginPath();                             //开始绘制图形
     ctx.fillRect(20,20,200,200);       //绘制一个矩形
     ctx.restore();                              //获取保存的上下文对象
     ctx.filleStyle="red";           //重新设置填充颜色
     ctx.beginPath();                      //开始一个新的绘制路径
     ctx.fillRect(300,20,200,200);       //绘制第二个矩形

透明效果：主要通过设置globalAlpha属性来控制重叠图形的透明度（值介于0和1之间）0完全透明，1完全不透明

var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     ctx.fillStyle="red";                  //设置填充色
     ctx.fillRect(20,20,300,200);      //绘制不透明矩形框
     ctx.globalAlpha=0.2;   //设置透明度
     ctx.fillStyle="blue";           //设置填充颜色
     ctx.fillRect(100,100,300,200);           //第二个矩形
     ctx.fillStyle="green";
     ctx.fillRect(150,150,200,200);           //第三个矩形