canvas 样式继承错乱的bug
发布于 6 年前 作者 dmao 11066 次浏览 来自 问答
  • 当前 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 回复

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

setFontSize

回到顶部