创建阴影效果需要操作以下4个属性：

1.context.shadowColor：阴影颜色。
2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。
3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。
4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。

例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;

需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：

程序代码：

     
     
     
     
     
     
     
         
     
     
    
HTML5 Canvas Clip Demo - By Gloomy Fish
     
    
Fill And Stroke Clip
     
    
     
             
    
     
     

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！