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