视频课堂https://edu.csdn.net/course/play/7621

组合图形 

 绘制阴影<canvas id="canvas" width="500" height="500"></canvas><script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.strokeStyle="yellow";var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;//保存当前的绘图状态ctx.save();ctx.setTransform(1,0,-0.5,1,100,0);//开始绘图路径;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.strokeStyle="white";ctx.stroke();ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fill();//填充样式和填充完毕;ctx.restore();ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.stroke();ctx.fill();}window.addEventListener("load",draw(),true);</script>
<canvas id="canvas2" width="500" height="500"></canvas><script>function draw2(){var c=document.getElementById("canvas2");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.fillRect(0,0,100,100);ctx.fillStyle="blue";ctx.fill();ctx.globalCompositeOperation="source-over";//画圆;var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.fill();}window.addEventListener("load",draw2(),true);</script>在绘制图形时，如果画布上已经有图形，就涉及到一个问题：两个图形如何组合。可以通过CanvasRenderingContext2D.globalCompositeOperation属性来设置组合方式

<canvas id="canvas3" width="500" height="500"></canvas><script>function draw3(){var c=document.getElementById("canvas3");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.save();//保存填充样式的颜色.ctx.shadowBlur=20;//设置像素模糊值为20；ctx.shadowOffsetX=15;//横向值为15;ctx.shadowOffsetY=15;//纵向值为15；ctx.shadowColor="blue";ctx.fillRect(50,50,100,100);ctx.restore();ctx.fillRect(200,50,100,100);}window.addEventListener("load",draw3(),true);</script>

在绘制图形时，可以通过CanvasRenderingContext2D的一组属性设置图形的阴影 

属  性  名	具 体 描述
shadowBlur	阴影的像素模糊值
shadowOffsetX	阴影在x轴上的偏移值
shadowOffsetY	阴影在y轴上的偏移值
shadowColor	阴影颜色值