小程序canvas保存图片微信工具上和手机上样式不一样?

作者站长头像
站长
· 阅读数 4

下面是关于canvas绘制的关于文字大小的一些关键性代码:

 // 绘制微信名称
    ctx.font = (24/ _this.ratio*_this.devicePixelRatio) + "px sans-serif"
    ctx.fillStyle = '#212121'
    ctx.fillText(`${this.doctorData.DoctorName}-[${this.doctorData.DeptName}]`, (205 / _this.ratio), (110 / _this.ratio))//描绘文本
                
                
  row.push(temp)
                      ctx.font = (30/ _this.ratio) + "px"
                      ctx.fillStyle = "#9E9E9E"
                      for (var b = 0; b < row.length; b++) {
                        ctx.fillText(row[b], x, y + (b + 1) * 15)
                      }
                
                      // 把二维码图片绘制到画布中
                      ctx.drawImage(_this.imgUrler, (205 / _this.ratio), (300 / _this.ratio), (340 / _this.ratio), (340 / _this.ratio), (140 / _this.ratio), (375 / _this.ratio))//描绘图片
                
   ctx.font = (34 / _this.ratio) + "px"
                      ctx.fillStyle = "#212121"
                      ctx.textAlign = 'center'
                      ctx.fillText('用微信扫描二维码查看医生信息', (375 / _this.ratio), (750 / _this.ratio))//描绘文本

下面的图片是通过canvas绘制并直接保存到手机上的。现在的问题是:在微信开发工具上保存下面的canvas图片和手机上保存下来的图片不一样:下面是微信工具保存的图片效果:小程序canvas保存图片微信工具上和手机上样式不一样?下面是手机上保存的图片效果:小程序canvas保存图片微信工具上和手机上样式不一样?

如下所示:微信开发工具的几乎没什么问题,但是绘制canvas时会有:

Failed to set 'font' on 'CanvasContext': invalid format.的错误提示

这个提示手机上绘制时也会有,但是好像微信开发工具上的没什么影响,但是手机上的好像font属性没起作用。

有人遇到过这样的问题吗?下面是微信开发工具:小程序canvas保存图片微信工具上和手机上样式不一样?下面是我手机:小程序canvas保存图片微信工具上和手机上样式不一样?

回复
1个回答
avatar
test
2024-06-25
ctx.font = '700 15px sans-serif' //这个在微信开发工具是没有问题,但是手机上不行
// 需要添加setFontSize
ctx.setFontSize(36); // 36:字体大小  //手机上字体设置要用这个。
ctx.fillText('文案', x, y)
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容