Canvas--陰影

一、shadowColor:設置陰影顏色,默認值爲 '#000'。與 shadowBlur 屬性一塊兒使用,來建立陰影。spa

 1 context.fillStyle = '#0091db'
 2 context.shadowColor = '#ff0000'
 3 for (let i = 0; i < 10; i++) {
 4     context.beginPath()
 5     context.shadowBlur = 5 * (i + 1)
 6     if (i < 5) {
 7         context.fillRect(50 + 200 * i, 50, 100, 80)
 8     } else {
 9         context.fillRect(50 + 200 * (i - 5), 250, 100, 80)
10     }
11 }

二、shadowOffsetXshadowOffsetY屬性:定義陰影與形狀的水平、垂直距離。3d

1 context.beginPath()
2 context.fillStyle = '#0091db'
3 context.shadowBlur = 5
4 context.shadowColor = '#000'
5 context.shadowOffsetX = 10
6 context.shadowOffsetY = -10
7 context.fillRect(50,50,100,80)

相關文章
相關標籤/搜索