微信小程序canvas绘制带有阴影的矩形

/**  此方法解决具有渐变背景色的圆角矩形，在真机上阴影显示不出来的问题
 * 绘制圆角矩形(带有渐变色的圆角矩形会覆盖掉矩形的阴影)
 * @param {Object} ctx - canvas组件的绘图上下文
 * @param {Number} x - 矩形的x坐标
 * @param {Number} y - 矩形的y坐标
 * @param {Number} w - 矩形的宽度
 * @param {Number} h - 矩形的高度
 * @param {Number} r - 矩形的圆角半径
 * @param {String} [shadowColor = '#fff'] - 阴影颜色
 * @param {Number} shadowBlur - 阴影的模糊级别，数值越大越模糊
 * @param {Number} shadowOffsetX - 阴影相对于形状在水平方向的偏移
 * @param {Number} shadowOffsetY - 阴影相对于形状在竖直方向的偏移
 */
export default function useLinerShadowRoundRect(ctx, x, y, w, h, r, shadowColor = '#fff', shadowBlur = 0, shadowOffsetX = 0, shadowOffsetY = 0) {
	if (w < 2 * r) { r = w / 2; }
	if (h < 2 * r) { r = h / 2; }

	ctx.beginPath();
	// 新版本添加阴影
	ctx.shadowColor = shadowColor;
	ctx.shadowBlur = shadowBlur;
	ctx.shadowOffsetX = shadowOffsetX;
	ctx.shadowOffsetY = shadowOffsetY;

	ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
	ctx.moveTo(x + r, y);
	ctx.lineTo(x + w - r, y);
	ctx.lineTo(x + w, y + r);

	ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
	ctx.lineTo(x + w, y + h - r);
	ctx.lineTo(x + w - r, y + h);

	ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
	ctx.lineTo(x + r, y + h);
	ctx.lineTo(x, y + h - r);

	ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
	ctx.lineTo(x, y + r);
	ctx.lineTo(x + r, y);

	ctx.fill();


	// 取消阴影
	//ctx.shadowBlur = 0;
	//ctx.shadowOffsetY = 0;
	//ctx.shadowOffsetX = 0;

};