小編給大家分享一下如何使用HTML5 Canvas繪制陰影效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元井陘做網(wǎng)站,已為上家服務(wù),為井陘各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

創(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
     
         
             
    
     
     

以上是“如何使用HTML5 Canvas繪制陰影效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！