《HTML5 canvas開發詳解（第2版）》——2.10 建立陰影

本節書摘來自異步社群《html5 canvas開發詳解（第2版）》一書中的第2章，第2.10節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

讀者可以使用4個參數給畫布上的形狀添加陰影。與2.9節所講的填充圖案一樣，這項功能還沒有被所有相容html5的浏覽器完全支援。

可以通過設定以下4個canvas參數來添加陰影：

shadowoffsetx；

shadowoffsety；

shadowblur；

shadowcolor。

shadowoffsetx和shadowoffsety值可以為正值或負值——負值将會在左側和上方建立陰影，反之将會在底部和右側建立陰影。shadowblur屬性用來設定陰影模糊效果的程度。這3個參數都不受目前canvas變換矩陣影響。shadowcolor屬性可以是任何html4顔色的常量字元串——rgb()或rgba()——或者是十六進制數值字元串。

例2-27和圖2-39顯示了幾個不同陰影效果的方塊。