這篇文章主要介紹如何使用HTML5中的Canvas繪制陰影效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)建陰影效果需要操作以下4個(gè)屬性：

1.context.shadowColor：陰影顏色。
2.context.shadowOffsetX：陰影x軸位移。正值向右，負(fù)值向左。
3.context.shadowOffsetY：陰影y軸位移。正值向下，負(fù)值向上。
4.context.shadowBlur：陰影模糊濾鏡。數(shù)據(jù)越大，擴(kuò)散程度越大。
這四個(gè)屬性只要設(shè)置了第一個(gè)和剩下三個(gè)中的任意一個(gè)就有陰影效果。不過通常情況下，四個(gè)屬性都要設(shè)置。

例如，創(chuàng)建一個(gè)向右下方位移各5px的紅色陰影，模糊2px，可以這樣寫。

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

需要注意的是，這里的陰影同其他屬性設(shè)置一樣，都是基于狀態(tài)的設(shè)置。因此，如果只想為某一個(gè)對象應(yīng)用陰影而不是全局陰影，需要在下次繪制前重置陰影的這四個(gè)屬性。
運(yùn)行結(jié)果：

陰影文字：

只要設(shè)置shadowOffsetX與shadowOffsetY的值，當(dāng)值都正數(shù)時(shí)，陰影相對文字的右下

方偏移。當(dāng)值都為負(fù)數(shù)時(shí)，陰影相對文字的左上方偏移。

3D拉影效果：

在同一位置不斷的重復(fù)繪制文字同時(shí)改變shadowOffsetX、shadowOffsetY、shadowBlur

的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。

邊緣模糊效果文字：

在3D拉影效果的基礎(chǔ)上在四個(gè)方向重復(fù)，就得到了邊緣羽化的文字效果。

運(yùn)行效果：

程序代碼：

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