Canvas 的 context 中有四個參數(shù)可以用于設(shè)置陰影相關(guān)屬性。
| 方法名 | 說明 |
|---|---|
| shadowOffsetX | 陰影 x 軸偏移量。可以為正值或負值；負值表示在左側(cè)和上方創(chuàng)建陰影，正值表示在底部和右側(cè)創(chuàng)建陰影。 |
| shadowOffsetY | 陰影 y 軸偏移量。其它特性與陰影 x 軸偏移量相同。 |
| shadowBlur | 設(shè)置陰影模糊程度。 |
| shadowColor | 設(shè)置陰影顏色?？梢允穷伾Q、rgb()、rgba() 或十六進制數(shù)值字符串。 |
我們有一張 500×500 像素的圖片。
現(xiàn)在為其添加一個往左上偏移的陰影。
var fillImg = new Image();
fillImg.src = 'girl2.jpg';
fillImg.onload = function () {
context.shadowOffsetX=-4;
context.shadowOffsetY=-4;
context.shadowColor='black';
context.shadowBlur=4;
context.fillStyle=context.createPattern(fillImg, 'no-repeat');
context.fillRect(10,10,700,700);
}
運行結(jié)果：
圖片來源于網(wǎng)絡(luò)。
示例略作修改，就可以為圖片設(shè)置右下陰影效果：
context.shadowOffsetX=10;
context.shadowOffsetY=10;
運行結(jié)果：
修改陰影顏色為深空灰：
context.shadowColor='rgb(100,100,100)';
運行結(jié)果：
除了圖片，任何 Canvas 形狀都可以按照上述方式為其添加陰影。
