收藏
回答

canvas 样式继承错乱的bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 android 6.7.3.1360 2.4.1

- 当前 Bug 的表现(可附上截图)

从上往下多次执行save和restore,但每次执行,都有可能出现 save和restore之间设置的样式,被下一个区间的的绘图所继承。


下面这个是执行正常的画图:



下面这个是执行不正常的画图,“苏打绿”的字体大小不知道继承的哪的:




- 提供一个最简复现 Demo



const ctx = wx.createCanvasContext('myCanvas')


// 背景图片

ctx.save()

ctx.drawImage(res[0].path, 0, 0, 750, 1334)

ctx.restore()


// 日期

ctx.save()

ctx.setTextBaseline('top')

ctx.fillStyle = '#FFFFFF'

ctx.font = 'normal normal bold normal 120px "DIN Alternate"'

ctx.fillText(poster.time.day, 59, 67)

ctx.restore()


// 月份和年份

ctx.save()

ctx.setTextBaseline('top')

ctx.fillStyle = '#FFFFFF'

ctx.font = 'normal normal normal normal 24px "DIN Alternate"'

ctx.fillText(poster.time.month + ' ' + poster.time.year, 69, 198)

ctx.restore()


// 一句话

ctx.save()

ctx.setTextBaseline('top')

ctx.fillStyle = '#FFFFFF'

ctx.font = 'normal normal bold normal 32px "PingFang SC"'

ctx.fillText(poster.text.str, 64, 257)

ctx.restore()


// 一句话下面的横线

ctx.save()

ctx.setStrokeStyle('#ffffff')

ctx.setLineWidth(4)

ctx.beginPath()

ctx.moveTo(64, 346)

ctx.lineTo(120, 346)

ctx.stroke()

ctx.restore()


// 一句话来源

ctx.save()

ctx.setTextBaseline('top')

ctx.fillStyle = 'rgba(255,255,255,.64)'

ctx.font = 'normal normal bold normal 24px "PingFang SC"'

ctx.fillText(poster.text.source, 64, 386)

ctx.restore()


//绘图

ctx.draw()

回答关注问题邀请回答
收藏

1 个回答

  • 2018-11-29

    你要是设置了字体的大小就不会这样了

    setFontSize


    2018-11-29
    有用
    回复
登录 后发表内容