本篇繼續介紹html5的一些狀態值，html5的繪製上下文提供了豐富的效果，這篇介紹陰影的效果，陰影有四個狀態值控制，分別是shadowBlur，shadowOffsetX，shadowOffsetY和shadowColor。其中shadowBlur為陰影的像素模糊值，shadowOffsetX和shadowOffsetY#為陰影在x軸和y軸上的偏移值，shadowColor為陰影顏色值，其中預設的值是前三個值都為0，最後一個值設定為透明黑色。只要修改其中的兩個值就可以顯現出來陰影效果，如下面的例子所示，同時下面的例子也證明了他是一個狀態值，也可以使用save #儲存和restore彈出。
繪製的程式碼如下
context.fillStyle = "red"; context.save(); context.shadowBlur = 20; context.shadowColor = "rgb(255,0,0)"; context.fillRect(50,50,100,100); context.restore(); context.fillRect(200,50,100,100);
這裡只是把陰影顏色設定為紅色，由於x和y的偏移值都沒有設置，所以預設的就是這樣的陰影包圍狀態，shadowColor 設定為全不透的紅色，也可以透過argb值來設定透明度，但對應陰影的差異不大：
#修改為如下的程式碼，效果如下：
#繪製的程式碼如下：
context.fillStyle = "red"; context.save(); context.shadowBlur = 20; context.shadowColor = "rgb(255,0,0)"; context.fillRect(50,50,100,100); context.shadowColor = "argb(255,0,0,0.5)"; context.fillRect(200,50,100,100);
陰影在x軸和y軸上的偏移值，顧名思義，就是讓陰影發生偏移，分別在x軸和在y軸上偏移對應的距離。效果如下：
context.fillStyle = "red"; context.shadowBlur = 20; context.shadowColor = "rgb(255,0,0)"; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fillRect(50,50,100,100);
陰影不只適用於正方形，其他圖形也可以：
# #
context.fillStyle = "red"; context.shadowBlur = 20; context.shadowColor = "rgb(255,0,0)"; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.beginPath();//开始路径 context.arc(100,100,60,Math.PI / 6,Math.PI,true); context.closePath(); context.fill();//填充 context.beginPath();//开始路径 context.moveTo(200,50);//设置路径，参数为原点 context.lineTo(360,50);//设置路径直到本线段的终点 context.lineTo(360,150);//设置路径直到本线段的终点 context.closePath();//结束路径 context.fill();//正式绘制
以上就是Html5 Canvas初探學習筆記(8) -陰影的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
#
