- 当前 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方法设置为渐变色之后无法正常重置。
麻烦提供出现问题的机型和微信版本,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
https://developers.weixin.qq.com/s/5mjadlm87S6h