您好,欢迎来到花图问答。
搜索
您的当前位置:首页canvas 绘制带四周阴影效果的圆角图片

canvas 绘制带四周阴影效果的圆角图片

来源:花图问答

绘制带四周阴影效果的圆角图片

  • 想要绘制圆角图片一可以先绘制出圆角矩形,然后对画布进行剪切clip,这样在剪切过的画布上绘制图片自然就表现为画布的形状。但是此时对图片绘制阴影是无效的,因为阴影必然在剪切的画布之外。

    image.png
  • 另一种办法是对图片创建模式createPattern,然后将模式填充到绘制好的圆角矩形区域。此时阴影有效,但是无法控制图片缩放。

    image.png
  • 我想到的解决办法是先用任意颜色填充圆角矩形绘制出阴影,然后再用第一种方法覆盖绘制,这样就得到了理想的效果

this.roundRect(ctx, PX, PY, PW, PH, PR) //绘制圆角矩形方法
ctx.setFillStyle('pink')
ctx.setShadow(0, 0, 4, 'rgba(0, 0, 0, 1)')
ctx.fill()
//覆盖绘制
ctx.save()
this.roundRect(ctx, PX, PY, PW, PH, PR)
ctx.clip()
ctx.drawImage(path, PX, PY, PW, PH);
ctx.restore()
image.png

Copyright © 2019- huatuowenda.com 版权所有 湘ICP备2023022495号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务