• 当前 Bug 的表现（可附上截图）

setStrokeStyle设置为渐变色，然后新建路径再设置为其他颜色，不生效

• 预期表现

新建路径后setStrokeStyle可以任意设置为其他颜色

• 复现路径

setStrokeStyle设置为渐变色 -> 画一个曲线 -> 新建路径 -> 设置其他颜色 -> 再画一条线，此时新路径颜色仍然是渐变色（开发工具正常，真机有bug）

• 提供一个最简复现 Demo

//表盘

const grd = ctx.createLinearGradient(0, ctxWidth / 2, ctxWidth, ctxWidth / 2)

grd.addColorStop(0, ‘#2ce2fa’)

grd.addColorStop(1, ‘#a433fd’)

ctx.beginPath();

ctx.arc(ctxWidth / 2, ctxWidth / 2, ctxWidth * .4, -1.3 * Math.PI, 0.3 * Math.PI)

ctx.setLineWidth(5)

ctx.setStrokeStyle(grd)

ctx.stroke()

// 刻度

ctx.translate(ctxWidth / 2, ctxWidth / 2);

ctx.lineWidth = 1;

for (let i = 0; i <= 100; i++) {

ctx.save()

ctx.beginPath();

if (i<50){

ctx.rotate((225 + i * 2.7 )* Math.PI / 180);

}else{

ctx.rotate((i - 50) * 2.7 * Math.PI / 180);

}

let startY = -ctxWidth / 2 + 14;

if(i%10===0){

startY = -ctxWidth / 2 + 8;

}

ctx.moveTo(0, startY);

ctx.lineTo(0, -ctxWidth / 2+20);

if(i < 10){

ctx.setStrokeStyle(’#2ce1fa’);

}else if (i < 15) {

ctx.setStrokeStyle(’#38d1fa’);

} else if (i < 25) {

ctx.setStrokeStyle(’#3ec8fb’);

} else if (i < 50) {

ctx.setStrokeStyle(’#4ab6fa’);

} else if(i < 75){

ctx.setStrokeStyle(’#688afc’)

} else if (i < 85) {

ctx.setStrokeStyle(’#855ffc’)

} else if (i < 90) {

ctx.setStrokeStyle(’#924dfd’)

} else {

ctx.setStrokeStyle(’#9844fd’)

}

ctx.stroke();

ctx.restore()

}

ctx.draw()

上面代码话了一个渐变色的表盘和多种颜色的刻度，结果刻度颜色无法正常设置，只要将绘制顺序调整成先画刻度再话表盘就没问题，初步定位问题是因为setStrokeStyle方法设置为渐变色之后无法正常重置。