Canvas3 绘图和重叠

 视频课堂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>
     
    
  
 

  

   

    

     

    
    

     

      <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的一组属性设置图形的阴影 

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/78721466