1. 失效原因
我用canvas画的矩形的背景色用的渐变色，如下方代码：
let linearGradient = ctx.createLinearGradient(18, 170, 339, 666);
linearGradient.addColorStop(0, '#FBFCFF');
linearGradient.addColorStop(1, '#F2F5FB');
ctx.fillStyle = linearGradient;
渐变色背景会使阴影被覆盖（正常填充的背景色不会出现这种情况），原因我不知道。
2. 解决方法
如果你也用了渐变色作为背景色，那可以如下方法解决。
1. 先画有阴影的矩形，再画带有渐变背景色的矩形。
useLinerShadowRoundRect(context, 18, 470, 339, height - 660, 23, '#BDCFFC', 4, 0, 3);
useRoundRect(context, 18, 470, 339, height - 660, 20, linearGradient);
2. 带有阴影矩形方法（圆角矩形）
/** 此方法解决具有渐变背景色的圆角矩形，在真机上阴影显示不出来的问题
* 绘制圆角矩形(带有渐变色的圆角矩形会覆盖掉矩形的阴影)
* @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.setShadow(shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor);
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;
// 老版本取消阴影
ctx.setShadow(0, 0, 0, '#fff');
ctx.closePath();
};
3. 带有背景色的圆角矩形方法封装
//渐变色可以在1. 失效原因中查看
/**
* 绘制圆角矩形
* @param {Object} ctx - canvas组件的绘图上下文
* @param {Number} x - 矩形的x坐标
* @param {Number} y - 矩形的y坐标
* @param {Number} w - 矩形的宽度
* @param {Number} h - 矩形的高度
* @param {Number} r - 矩形的圆角半径
* @param {String} [c = '#fff'] - 矩形的填充色
*/
export default function useRoundRect(ctx, x, y, w, h, r, c = '#fff') {
if (w < 2 * r) { r = w / 2; }
if (h < 2 * r) { r = h / 2; }
ctx.beginPath();
ctx.fillStyle = c;
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.closePath();
};
两种方法画圆角矩形带有重复代码，感兴趣可以自己封装。
