收藏
回答

setStrokeStyle设置为渐变色之后就无法再设置其他颜色了

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug Android 6.0.1 红米4pro 7.0.3

- 当前 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方法设置为渐变色之后无法正常重置。

最后一次编辑于  02-21  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答