小程序canvas组件 设置图片边框阴影问题?
使用canvas组件drawImage()用了两次,fillRect也用了两次,一共画了4个图层,从而构造出了如下图所示的效果。但是我设置阴影后,画的4个图层全部都有阴影,但我只想要让外框有阴影,请问大神该如何做呢
var context = wx.createCanvasContext('zbShare')
// 选择像素为500的话,那么图片宽度为500,高度等比例计算即可。
// 画背景图片
context.drawImage(this.data.bgWallUrlCanvas, 0, 0, this.data.calWindowWidth, this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace )
// context.setShadow(10, 10, 20, 'blue')
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 0;
context.shadowColor = 'rgba(0,0,0,1)';
// 画框
context.drawImage(this.data.barCanvas, (this.data.calWindowWidth - (this.data.FrameBarImgWidth + this.data.frameBarBorder)) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - (this.data.FrameBarImgHeight + this.data.frameBarBorder * 2)) / 2, this.data.FrameBarImgWidth + this.data.frameBarBorder, this.data.FrameBarImgHeight + this.data.frameBarBorder * 2)
// 画卡纸+颜色
context.setFillStyle(this.data.paperColor)
context.fillRect( (this.data.calWindowWidth - this.data.paperFrameImgWidth ) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.paperFrameImgHeight) / 2, this.data.paperFrameImgWidth, this.data.paperFrameImgHeight)
// 画里衬+颜色
context.setFillStyle(this.data.inColor)
context.fillRect( (this.data.calWindowWidth - this.data.inContentImgWidth ) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.inContentImgHeight) / 2, this.data.inContentImgWidth, this.data.inContentImgHeight)
// 画中间图片
context.drawImage(this.data.imgSrcCanvas, (this.data.calWindowWidth - this.data.contentImgWidth ) / 2, (this.data.calWindowHeight - this.data.pannelY - this.data.bottomDistnace - this.data.contentImgHeight) / 2, this.data.contentImgWidth, this.data.contentImgHeight)
// 调用getTempFilePath函数获取路径,然后保存至相册
context.draw(false, this.getTempFilePath);