Html5 Canvas初探學習筆記(8) -陰影

本篇繼續介紹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中文網（www.php.cn）！

#