说说在 Canvas 中如何添加阴影

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 形状都可以按照上述方式为其添加阴影。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值