《HTML5 Canvas開發詳解》——2.10 建立陰影

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

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

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

shadowoffsetx。

shadowoffsety。

shadowblur。

shadowcolor。

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

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

https://yqfile.alicdn.com/522fd023f89cf2ac0980a611489e777d9d287671.png" >

如圖2-39所示，如果同時調整shadowoffset和shadowblur值可以建立不同的陰影。當然canvas還可以為由路徑和弧形組成的複雜形狀建立陰影。