Canvas 的 context 中有四个参数可以用于设置阴影相关属性。
| 方法名 | 说明 |
|---|---|
| shadowOffsetX | 阴影 x 轴偏移量。可以为正值或负值；负值表示在左侧和上方创建阴影，正值表示在底部和右侧创建阴影。 |
| shadowOffsetY | 阴影 y 轴偏移量。其它特性与阴影 x 轴偏移量相同。 |
| shadowBlur | 设置阴影模糊程度。 |
| shadowColor | 设置阴影颜色。可以是颜色名称、rgb()、rgba() 或十六进制数值字符串。 |
我们有一张 500×500 像素的图片。
现在为其添加一个往左上偏移的阴影。
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);
}
运行结果：
图片来源于网络。
示例略作修改，就可以为图片设置右下阴影效果：
context.shadowOffsetX=10;
context.shadowOffsetY=10;
运行结果：
修改阴影颜色为深空灰：
context.shadowColor='rgb(100,100,100)';
运行结果：
除了图片，任何 Canvas 形状都可以按照上述方式为其添加阴影。
网友评论